JavaScript DOM节点操作：创建、插入、删除与替换指南

准备阶段：基础HTML结构

为了演示节点操作，首先需要一个基础的HTML列表结构作为操作对象。以下是一个包含三个子项的无序列表：

<ul id="myList">
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

第1步：创建元素节点

在将新内容加入页面之前，必须先创建该DOM节点。使用 document.createElement() 方法可以创建指定标签的元素节点。

• 入口：document 对象
• 动作：调用 createElement(tagName)，传入标签名（如 'div' 或 'li'）。
• 参数：单个字符串，表示HTML标签名称。
• 完成状态：返回一个未挂载到文档树中的Element对象，可继续设置其属性。

var div = document.createElement("div"); //创建一个div元素
div.id = "myDiv"; //设置div的id
div.className = "box"; //设置div的class

注意：仅创建节点不会在页面上显示，必须将其添加到文档树中。

第2步：添加元素节点

创建节点后，需要将其插入到页面的合适位置。主要有两种插入方法：追加到末尾和插入到特定位置。

2.1 追加到末尾：appendChild

• 入口：父节点元素（如上面的 ul）。
• 动作：调用 appendChild(node)。
• 结果：将 node 移动到子节点列表的末尾，并返回被添加的节点。

var ul = document.getElementById("myList"); //获得ul对象
var li = document.createElement("li"); //创建li节点
li.innerHTML = "项目四"; //向li内添加文本
ul.appendChild(li); //把li添加到ul子节点的末尾

执行后，HTML结构变为：

<ul id="myList">
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
  <li>项目四</li>
</ul>

高级用法：如果传递给 appendChild 的是一个已存在于文档中的节点，该方法会将其从当前位置移除并移动到新的位置（类似剪切粘贴）。例如：

var ul = document.getElementById("myList");
ul.appendChild(ul.firstChild); //将第一个li移到末尾

2.2 插入到特定位置：insertBefore

• 入口：父节点元素。
• 动作：调用 insertBefore(newNode, referenceNode)。
• 参数：
  • newNode：要插入的节点。
  • referenceNode：参照节点，newNode 将插在该节点之前。
• 特殊行为：如果 referenceNode 为 null，则等效于 appendChild，追加到末尾。

var ul = document.getElementById("myList");
var li = document.createElement("li");
li.innerHTML = "项目四";
ul.insertBefore(li, ul.firstChild); //将li添加到ul的第一个子节点前

执行后，新项目成为第一个子节点。此外，还可以通过获取元素集合来定位参照节点：

var lis = ul.getElementsByTagName("li");
ul.insertBefore(li, lis[1]); //插入到第二个li之前

第3步：移除元素节点

使用 removeChild() 方法从文档树中移除节点。

• 入口：要移除节点的直接父节点。
• 动作：调用 parent.removeChild(child)。
• 结果：返回被移除的节点（该节点仍存在于内存中，但不再显示在页面上），并从DOM结构中彻底断开连接。

var ul = document.getElementById("myList");
//方式一：通过直接访问子节点移除
var removedNode = ul.removeChild(ul.firstChild);

//方式二：通过索引移除（需注意浏览器兼容性差异）
var lis = ul.getElementsByTagName("li");
ul.removeChild(lis[0]);

第4步：替换元素节点

replaceChild() 方法用于用一个新节点替换掉现有的旧节点。

• 入口：目标父节点。
• 动作：调用 parent.replaceChild(newNode, oldNode)。
• 参数：
  • newNode：要插入的新节点。
  • oldNode：要被替换的现有节点。
• 结果：返回被替换掉的旧节点。

var ul = document.getElementById("myList");
var newLi = document.createElement("li");
newLi.innerHTML = "新项目";
var lis = ul.getElementsByTagName("li");
var returnNode = ul.replaceChild(newLi, lis[1]); //用新li替换原来的第二个li

第5步：复制节点

使用 cloneNode() 方法可以复制一个节点。该方法接受一个布尔值参数来决定复制的深度。

• 浅复制（false）：只复制节点本身，不复制其子节点和事件监听器。默认值为 false。
• 深复制（true）：复制节点及其所有后代节点，通常也会保留属性，但事件处理程序（event handlers）在某些浏览器实现中可能不被复制。

var ul = document.getElementById("myList");
var deepList = ul.cloneNode(true);   //深复制，包含所有子li
var shallowList = ul.cloneNode(false); //浅复制，只有ul标签，无子项

排错与注意事项

• 兼容性：虽然上述标准DOM API在现代浏览器中表现一致，但在老旧浏览器（如IE8及以前）中，某些细节（如 removeChild 对非直接子节点的处理、 cloneNode 的事件绑定保留情况）可能存在差异。建议在复杂场景下进行跨浏览器测试。
• 节点存在性：在操作 insertBefore 或 removeChild 时，务必确保参照节点和被操作节点确实存在于当前文档流中，否则可能导致 JavaScript 报错。
• 性能考量：频繁的单次DOM操作会导致页面重排（Reflow）。如果需大量插入节点，建议先在内存中构建DocumentFragment，再一次性插入文档树。