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

DOM 节点操作方法概述

文档对象模型（DOM）

核心方法包括 createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore() 以及 createDocumentFragment()

节点的创建、删除与替换

// 创建新节点示例

function CreatNode() {

var oP = document.createElement("p");

oP.innerHTML = "<font style='color:red;'>Hello World！</font>";

document.body.appendChild(oP);

// 删除节点示例

function RemoveNode() {

var oP = document.getElementsByTagName("p");

var len = oP.length;

if (len != 0) {

oP[len - 1].parentNode.removeChild(oP[len - 1]); // 建议通过节点的 parentNode 属性来执行删除操作

} else {

alert("已经全部删除！");

// 替换节点示例

function ReplaceNode() {

var oNewP = document.createElement("p");

oNewP.innerHTML = "<font style='color:red;'>New --> Hello World！</font>";

// 将最后一个新增的节点替换为 oNewP

var len = document.getElementsByTagName("p").length;

var oOldLastP = document.getElementsByTagName("p")[len - 1];

oOldLastP.parentNode.replaceChild(oNewP, oOldLastP);

节点插入与文档碎片优化

// insertBefore() 方法说明

该方法用于将新节点插入到指定旧节点之前，需接收两个参数：

1. 要添加的目标节点；2. 插入位置前的参考节点

xxx.parentNode.insertBefore(newChild, oldChild);

// createDocumentFragment() 方法说明

用于创建文档碎片（Document Fragment）

可将多个新建的节点元素先添加到文档碎片中，随后将该碎片作为参数传递给目标容器的 appendChild() 方法

xxx.appendChild(oFragment);

这种方式使目标元素仅调用一次 appendChild，替代多次单独调用，从而显著提升性能。