副队长JavaScript教程(55)-DOM节点增删改查

点此查看 所有教程、项目、源码导航

文章目录

[1. 背景](#1. 背景)
[2. 创建节点 createElement](#2. 创建节点 createElement)
[3. 追加节点 appendChild](#3. 追加节点 appendChild)
[4. 在指定位置插入节点 insertBefore](#4. 在指定位置插入节点 insertBefore)
[5. 删除节点 removeChild /remove](#5. 删除节点 removeChild /remove)
- [方式 1：removeChild（父删子）](#方式 1：removeChild（父删子）)
- [方式 2：remove（节点自己删除自己，现代写法，推荐）](#方式 2：remove（节点自己删除自己，现代写法，推荐）)
[6. 克隆节点 cloneNode](#6. 克隆节点 cloneNode)
[7. 小结](#7. 小结)

1. 背景

前面我们学习了获取元素、修改元素内容、属性、样式。这些操作都是基于页面上已经存在的 DOM 节点。

实际开发里，我们经常需要动态创建节点、往页面添加节点、删除节点、复制节点。比如加载列表、动态新增留言、删除一条消息。

本篇我们学习 DOM 节点的新增、删除、克隆等操作。

2. 创建节点 createElement

document.createElement() 用来创建一个新的元素节点，创建出来之后，它只是在内存里面，还没有放到页面上。

语法：

js 复制代码

document.createElement("标签名");

示例：

js 复制代码

// 创建一个p标签
var p = document.createElement("p");
// 给新节点设置内容
p.innerText = "我是动态创建的段落";
// 给新节点设置class
p.className = "item";

重点说明：

参数是标签名字，小写；
仅仅创建，不会自动加入页面，必须执行追加操作才会显示；
创建之后，可以正常给它设置 innerText、innerHTML、属性、样式。

3. 追加节点 appendChild

appendChild() 是父节点的方法，把一个子节点追加到父元素内部的最后面。

语法：

js 复制代码

父元素.appendChild(子节点);

示例 HTML：

html 复制代码

<div id="container"></div>

示例 JS 代码：

js 复制代码

var container = document.querySelector("#container");
var p = document.createElement("p");
p.innerText = "追加的段落";
// 将p放到container里面
container.appendChild(p);

重点说明：

追加到父元素内部末尾；
如果这个节点原本已经在页面中，执行 appendChild 会把节点移动到新位置，而不是复制。

4. 在指定位置插入节点 insertBefore

如果不想加到末尾，想要插到某个子元素的前面，可以使用 insertBefore。

语法：

js 复制代码

父元素.insertBefore(新节点, 参考节点);

示例 HTML：

html 复制代码

<ul id="list">
    <li>第一项</li>
    <li id="second">第二项</li>
</ul>

js 复制代码

var list = document.querySelector("#list");
var second = document.querySelector("#second");
var newLi = document.createElement("li");
newLi.innerText = "插入到第二项前面";
list.insertBefore(newLi, second);

重点说明：

第二个参数是参考节点，新节点放在它前面；
如果第二个参数写 null，效果等同于 appendChild，加到末尾。

5. 删除节点 removeChild /remove

想要把页面上的节点移除，有两种写法。

方式 1：removeChild（父删子）

语法：

js 复制代码

父元素.removeChild(要删除的子节点);

js 复制代码

var list = document.querySelector("#list");
var second = document.querySelector("#second");
list.removeChild(second);

方式 2：remove（节点自己删除自己，现代写法，推荐）

js 复制代码

var second = document.querySelector("#second");
second.remove();

重点说明：

节点删除之后，只是从 DOM 树移除，如果还有变量保存这个节点，依然可以继续使用；
remove 写法更简洁，优先使用 remove。

6. 克隆节点 cloneNode

有时候我们需要复制一个已经存在的节点，使用 cloneNode。

语法：

js 复制代码

节点.cloneNode(布尔值);

参数为 false：浅克隆，只复制当前标签本身，不复制内部子节点
参数为 true：深克隆，复制当前节点 + 里面所有子节点

示例 HTML：

html 复制代码

<div id="box">
    <p>里面文字</p>
</div>

js 复制代码

var box = document.querySelector("#box");
// 深克隆
var cloneBox = box.cloneNode(true);
// 添加到页面
document.body.appendChild(cloneBox);

重点说明：

克隆出来的新节点同样只在内存，需要追加到父元素才会显示；
事件不会跟着克隆（入门阶段先记住这个现象）。

7. 小结

createElement：在内存创建 DOM 元素，不会自动上页面；
appendChild：追加到父元素末尾；insertBefore：插到指定节点前面；
remove()：节点自删除，写法简洁；removeChild：父元素删除子节点；
cloneNode(true) 深克隆，cloneNode(false) 浅克隆；
注意：所有创建、克隆出来的节点，都必须追加到 DOM 树，页面才看得见。