收藏
PHPz批改状态：合格
老师批语：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 1. 实例演示dom增删改的常用方法2. 改写留言板案例, 添加自定义样式 --><script>/***1.createElement(ele):创建新的元素，doucment上调用*2.append(string/ele):追加到父级最后子节点后，在父节点上调用；也可在新元素上调用，添加内容。*3.before(string/ele):某元素之前插入节点，在当前元素上调用*4.after(string/ele):在某元素之后插入节点，在当前元素上调用*5.cloneNode(true):克隆节点（true:包含子节点),在要被克隆的节点上调用*6.replaceChild(ele,pos):替换子元素,在父级节点上调用*7.node.remove()：移除当前元素，在当前元素调用。**/// 创建新的元素const ul = document.createElement("ul");//追加元素document.body.append(ul);for (let i = 0; i < 6; i++) {const li = document.createElement("li");//添加内容li.append("item" + (i + 1));//设置字号大小li.style.fontSize = "30px";//追加元素ul.append(li);}console.log(ul);//创建元素，添加内容，添加样式，获取第三个li,插入节点const li = document.createElement("li");li.append("new item");li.style.color = "pink";li.style.fontSize = "30px";const item = document.querySelector("ul li:nth-of-type(3)");item.before(li);//克隆节点const newNode = li.cloneNode(true);item.after(newNode);//节点替换const newItem = document.createElement("li");newItem.append("替换后的节点");const oldItem = document.querySelector("ul li:last-of-type");ul.replaceChild(newItem, oldItem);//节点删除const deleteItem = document.querySelector("ul li:first-of-type");deleteItem.remove();</script><script>//insertAdjacentElement('插入位置'，元素)//插入位置有四个//afterBegin:开始标签之后，第一个子元素//beforeBegin:开始标签之前，是它的前一个兄弟元素//beforeEnd:结束标签之前，它的最后一个子元素//afterEnd:结束标签之后，它的下一个兄弟元素const h3 = document.createElement("h3");h3.append("这是一个ul列表");ul.insertAdjacentElement("beforeBegin", h3);const insertItem = document.createElement("li");insertItem.append("这是一个afterBegin");ul.insertAdjacentElement("afterbegin", insertItem);const insertItem2 = document.createElement("li");insertItem2.append("这是一个beforeEnd");ul.insertAdjacentElement("beforeEnd", insertItem2);const h4 = document.createElement("h4");h4.append("这是一个footer");ul.insertAdjacentElement("afterEnd", h4);</script><input type="text" name="message" id="message" onkeydown="addMessage(this)" palceholder="请输入留言" autofocus /><ul class="list"></ul><script>//2. 改写留言板案例, 添加自定义样式let i = 0;function addMessage(ele) {if (event.key === "Enter") {if (ele.value.length === 0) {alert("留言不能为空");ele.focus();return false;}const ul = document.querySelector(".list");const li = document.createElement("li");//添加自定义属性li.setAttribute("data-index", ++i);//获取自定义属性ele.value = "第" + li.dataset.index + "条: " + ele.value + "<button onclick='del(this.parentNode)'>删除</button>";li.innerHTML = ele.value;// console.log(li);ul.insertAdjacentElement("afterbegin", li);ele.value = null;}}function del(ele) {return confirm("要删除吗？") ? ele.remove() : false;}</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
