← 返回目录

7. 节点增删改与克隆

操作节点就像收拾一个书架：createElement 是"做一本新书"，appendChild 是"放到书架最后"，insertBefore 是"插到某本书前面"，remove 是"抽掉一本"，replaceChild 是"把旧书换成新的"，cloneNode 是"复印一本一模一样的"。

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

7.2 知识点逐条讲解

① 先"做"一个新节点

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

let newLi = document.createElement('li'); // 折一个空白的 li 出来
newLi.innerText = '鸡蛋';                 // 往这个空 li 里写字
// 注意：此刻页面上还看不到它，得"挂上去"
	

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

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

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

let first = ul.children[0];        // 拿出 ul 的第 1 个孩子
ul.insertBefore(新节点, first); // 把新节点插到 first 这个孩子"前面"
	

③ 怎么删

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

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

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

④ 换书和复印

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

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

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

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

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

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