dom元素的增删改操作

增加

1. <script>
2. const ul = document.createElement("ul");
3. document.body.append(ul);
5. for (let i = 0; i < 5; i++) {
6. const li = document.createElement("li");
7. li.textContent = "item" + (i + 1);
8. ul.append(li);
9. }
11. console.log(ul);
12. console.log(ul.outerHTML);
13. script>

关键的操作都在上面的代码中，很直观。最后的两句输出的结果如下所示：

outerHTML是元素的html字符串表示

插入

1. const three = document.querySelector("ul li:nth-of-type(3)");
2. const li = document.createElement("li");
3. li.textContent = "new item";
4. li.style.color = "red";
5. three.before(li);
6. let cloneli = li.cloneNode(true);
7. three.after(cloneli);

函数名称都说明了函数的功能。注意一点，cloneNode如果没有参数true,就不是深克隆，那么节点的文本内容等属性就不能复制过去。

1. const h3 = document.createElement("h3");
2. h3.textContent = "商品列表";
3. ul.insertAdjacentElement("beforeBegin", h3);

还有afterBegin,beforeEnd，afterEnd.

替换

1. const last = document.querySelector("ul li:last-of-type");
2. const a = document.createElement("a");
3. a.href = "https://php.cn";
4. a.textContent = "php.cn";
5. ul.replaceChild(a, last);

移除

1. ul.lastElementChild.remove();

textContent

2. class="box">

4. 通知

5. style="display: none">13：00--14：00会供电

6. 本小区明天8：00-18：00停电