<!DOCTYPE html> <html> <head> <title>Dynamic List Example</title> <style> p:hover { cursor: pointer; } p.selected { color: orange; } </style> </head> <body> <div> <p id="p1" onclick="choose(this)">First item</p> </div> <br /> <input type="text" id="input"> <button onclick="append()">Append</button> <button onclick="remove()">Remove</button> <button onclick="move(-1)">Move Up</button> <button onclick="move(1)">Move Down</button> <script> let w = { ele: null, }; function choose(element) { if (w.ele != null) { w.ele.classList.remove('selected'); } element.classList.add('selected'); w.ele = element; } function move(direction) { if (w.ele == null) { return; } let sibling = (direction < 0) ? w.ele.previousElementSibling : w.ele.nextElementSibling; if (sibling == null) { return; } w.ele.parentNode.insertBefore(w.ele, (direction < 0) ? sibling : sibling.nextElementSibling); w.ele.blur(); w.ele = null; document.getElementsByTagName("button")[0].focus(); } function append() { let div = document.getElementsByTagName("div")[0]; let newpara = document.createElement("p"); let textnode = document.createTextNode(document.getElementById("input").value); newpara.appendChild(textnode); newpara.onclick = function () { choose(this); }; if (div.lastElementChild == null) { newpara.id = "p1"; } else { newpara.id = "p" + (parseInt(div.lastElementChild.id[1]) + 1); } div.appendChild(newpara); } function remove() { if (w.ele !== null) { w.ele.parentNode.removeChild(w.ele); w.ele = null; } } </script> </body> </html>
时间: 2023-06-11 16:07:02 浏览: 155
HTML参考手册
这是一个动态列表的 HTML 和 JavaScript 示例,可以让用户添加、删除和移动列表项。
HTML 部分包含一个 div 元素和一个 p 元素,p 元素包含一个可以单击的文本内容。此外,还有三个按钮和一个输入框,用于添加、删除和移动列表项。
JavaScript 部分定义了一些函数,包括 choose() 用于选择列表项,move() 用于移动列表项,append() 用于添加新的列表项,remove() 用于删除当前选择的列表项。其中,w.ele 变量用于存储当前选择的列表项,以便在移动或删除时使用。此外,还使用了一些 DOM 操作函数,例如 createElement()、appendChild()、removeChild() 等。
整个示例演示了如何使用 HTML 和 JavaScript 创建一个动态列表,并通过各种操作实现对列表项的动态修改。
阅读全文