JavaScript DOM节点操作详解：创建、添加、移除、替换与复制

本节示例将基于以下HTML结构展开：

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

创建与添加节点

1. 创建元素节点

使用 document.createElement() 方法可以创建新的元素节点。该方法接收一个参数，即要创建的元素的标签名，并返回新创建的Element对象。

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

需要注意的是，创建元素后必须将其添加到文档树中，否则该元素不会在页面上显示。

2. 添加元素节点

appendChild() 方法用于将一个节点添加到指定父节点的子节点列表末尾。该方法返回被添加的节点引用。

 
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元素
ul.appendChild(ul.firstChild); // 将ul的第一个子节点移动到ul子节点列表的末尾

在IE浏览器中运行后的结果如下：

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

insertBefore() 方法用于在指定参照节点之前插入新节点。该方法接收两个参数：第一个参数是要插入的节点，第二个参数是参照节点（新节点将插入到该节点之前）。如果参照节点为 null，则行为等同于 appendChild()。该方法返回被插入的节点。

 
var ul = document.getElementById("myList"); // 获取目标ul元素
var li = document.createElement("li"); // 创建新的li元素
li.innerHTML = "项目四"; // 设置li内部文本
ul.insertBefore(li, ul.firstChild); // 将li插入到ul的第一个子节点之前

执行后的HTML结构如下：

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

 
var ul = document.getElementById("myList"); // 获取目标ul元素
var li = document.createElement("li"); // 创建新的li元素
li.innerHTML = "项目四"; // 设置li内部文本
ul.insertBefore(li, ul.null); // 将li添加到ul的子节点末尾（注：此处原文代码写为ul.null，实际应为null或ul.childNodes[ul.childNodes.length]等逻辑，但依原文保留代码逻辑描述）

执行后的HTML结构如下：

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

 
var ul = document.getElementById("myList"); // 获取目标ul元素
var li = document.createElement("li"); // 创建新的li元素
li.innerHTML = "项目四"; // 设置li内部文本
var lis = ul.getElementsByTagName("li"); // 获取ul中所有li元素的集合
ul.insertBefore(li, lis[1]); // 将li插入到ul中第二个li节点之前

执行后的HTML结构如下：

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

移除与替换节点

3. 移除元素节点

removeChild() 方法用于从父节点中移除子节点。该方法接收一个参数，即要移除的节点，并返回被移除的节点。需要注意的是，被移除的节点仍然存在于内存中（文档树之外），并未被销毁，只是从当前文档结构中移除。

 
var ul = document.getElementById("myList"); // 获取目标ul元素
var fromFirstChild = ul.removeChild(ul.firstChild); // 移除ul的第一个子节点
var lis = ul.getElementsByTagName("li"); // 获取ul中所有li元素的集合
ul.removeChild(lis[0]); // 移除第一个li元素。注意：直接操作集合时，不同浏览器对实时更新的 NodeList 处理可能存在差异，需谨慎处理。

4. 替换元素节点

replaceChild() 方法用于用一个新节点替换父节点中的某个子节点。该方法接收两个参数：第一个参数是要插入的节点，第二个参数是要被替换的节点。该方法返回被替换下来的节点。

 
var ul = document.getElementById("myList"); // 获取目标ul元素
var fromFirstChild = ul.replaceChild(ul.firstChild); // 替换ul第一个子节点（注：此处原文代码缺少第二个参数，实际调用需两个参数，依原文保留代码逻辑描述）
var li = document.createElement("li"); // 创建新的li元素
li.innerHTML = "项目四"; // 设置li内部文本
var lis = ul.getElementsByTagName("li"); // 获取ul中所有li元素的集合
var returnNode = ul.replaceChild(li, lis[1]); // 用新创建的li替换原来的第二个li节点

复制节点

5. 复制节点

cloneNode() 方法用于复制节点。该方法接收一个布尔值参数：true 表示执行深复制（复制节点及其所有后代节点和属性），false 表示执行浅复制（仅复制节点本身，不复制子节点和后代）。

 
var ul = document.getElementById("myList"); // 获取目标ul元素
var deepList = ul.cloneNode(true); // 深复制，包含所有子节点
var shallowList = ul.cloneNode(false); // 浅复制，仅复制ul标签本身

在进行节点操作时，务必注意不同浏览器（特别是旧版IE）之间的兼容性差异，建议参考相关章节了解具体的兼容处理方案。