<!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 17:07:02 浏览: 49
这是一个动态列表的 HTML 和 JavaScript 示例,可以让用户添加、删除和移动列表项。
HTML 部分包含一个 div 元素和一个 p 元素,p 元素包含一个可以单击的文本内容。此外,还有三个按钮和一个输入框,用于添加、删除和移动列表项。
JavaScript 部分定义了一些函数,包括 choose() 用于选择列表项,move() 用于移动列表项,append() 用于添加新的列表项,remove() 用于删除当前选择的列表项。其中,w.ele 变量用于存储当前选择的列表项,以便在移动或删除时使用。此外,还使用了一些 DOM 操作函数,例如 createElement()、appendChild()、removeChild() 等。
整个示例演示了如何使用 HTML 和 JavaScript 创建一个动态列表,并通过各种操作实现对列表项的动态修改。
相关问题
<!DOCTYPE html></!DOCTYPE> <html> <head> <title>绿叶学习网</title> </head> <body> <p>绿叶学习网</p> </body> </html>哪里错了
在给出的HTML代码中,有两个地方出现了错误:
1. 第一行的`<!DOCTYPE html></!DOCTYPE>`是错误的。正确的写法是`<!DOCTYPE html>`,用于声明文档类型为HTML。
2. 第二行的`</!DOCTYPE>`也是错误的。正确的写法是`</html>`,用于闭合HTML标签。
修正后的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>绿叶学习网</title>
</head>
<body>
<p>绿叶学习网</p>
</body>
</html>
```
<!DOCTYPE html></!DOCTYPE> <html> <head> <title>绿叶学习网</title> </head> <body> <p>绿叶学习网</p> </body> </html>
这是一个HTML文档的基本结构,它描述了一个网页的内容和结构。下面是对该HTML文档的介绍:
<!DOCTYPE html>:这是一个文档类型声明,指定了该文档使用的HTML版本。
<html>:这是HTML文档的根元素,它包含了整个HTML文档的内容。
<head>:这是HTML文档的头部部分,用于定义文档的元数据和引入外部资源。
<title>:这是HTML文档的标题,显示在浏览器的标题栏或标签页上。
<body>:这是HTML文档的主体部分,包含了网页的实际内容。
<p>:这是一个段落元素,用于定义一个段落。
绿叶学习网:这是一个段落中的文本内容,将在网页中显示。