7. 节点增删改与克隆

增删改查节点就是往页面上加元素、删元素、改元素。

核心五个：
① createElement——创建新元素
② appendChild——往末尾加
③ insertBefore——插到某个前面
④ removeChild——删除子节点
⑤ cloneNode——克隆节点（true 深克隆）

坑：创建完不 append 不显示、cloneNode 默认浅克隆只克隆外壳、删除要拿到父节点。

7.1 互动演示（收拾这个购物清单）

点按钮： 清单真的增删改， 下面同步代码与结论。

7.2 知识点逐条讲解

① 先"做"一个新节点

光说不练：先拿白纸折一个新标签出来。这时它还飘在半空、页面上看不见，得挂上去才现身。

// 折一个空白的 li 出来
let newLi = document.createElement('li');

// 往这个空 li 里写字
newLi.innerText = '鸡蛋';

// 注意：此刻页面上还看不到它，得"挂上去"

② 往哪挂：末尾加 / 前面插

// 抓到那个 ul 清单
let ul = document.getElementById('shopList');

// 把新 li 挂到 ul 的"最后面"
ul.appendChild(newLi);

// 拿出 ul 的第 1 个孩子
let first = ul.children[0];

// 把新节点插到 first 这个孩子"前面"
ul.insertBefore(新节点, first);

③ 怎么删

// 老写法：必须通过"爹"删"儿子"
// 让 ul 把它的孩子 first 撤掉
ul.removeChild(first);

// 新写法：自己把自己撤了，更省事
// 这个元素直接自己消失
someLi.remove();

如果你拿一个"不是 ul 亲生的子节点"去 ul.removeChild，就会报错。因为 removeChild 只认自己的孩子；拿不准就用 元素.remove() 自己撤自己。

④ 换书和复印

// 换：父.replaceChild(新的, 旧的)
// 把旧节点换成新节点
ul.replaceChild(新节点, 旧节点);

// 复印：true = 连里面的内容一起复印
// false = 只复印个空壳
// 连孩子一起抄，得个一模一样的副本
ul.cloneNode(true);

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：动态评论、待办清单、购物车增删行。

② 常见坑：拿非子节点 removeChild 报错；克隆只抄空壳没内容。

③ 怎么解决：用 元素.remove() 自己删；要连内容复制用 cloneNode(true)。

本页重点