JavaScript 操作 DOM 元素：添加、删除、替换、插入的完整方法指南

JavaScript 操作 DOM 元素：添加、删除、替换、插入的完整方法指南

一、开篇：DOM 元素操作 —— 前端页面交互的核心基石

在前端开发中，DOM（文档对象模型）是连接 JavaScript 与页面结构的桥梁，而元素的添加、删除、替换、插入是 DOM 操作中最基础也最常用的场景。无论是构建动态列表、实现组件渲染，还是处理用户交互后的页面更新，都离不开这些核心方法。

很多初学者在面对appendChild、insertBefore、removeChild等方法时，容易混淆其用法和适用场景，甚至出现 “元素插入失败”“删除报错” 等问题。本文将系统梳理 JavaScript 中 DOM 元素操作的四大类方法（添加、删除、替换、插入），结合实战示例、使用差异和注意事项，帮你彻底掌握 DOM 元素操作的精髓。

二、第一类：添加元素 —— 向 DOM 中新增节点

添加元素的核心是将创建好的 DOM 节点（或已有节点）挂载到指定父元素下，常用方法有 4 种，各自有明确的适用场景：

1. appendChild ()：追加子元素到父元素末尾

核心功能：将一个节点添加到指定父节点的子节点列表的末尾，是最基础的添加元素方法。语法：parentNode.appendChild(childNode)特点：

• 若childNode是页面中已存在的节点，会将其从原有位置移动到新的父元素末尾（而非复制）；
• 返回值为被添加的childNode节点。

实战示例：

javascript

运行

// 1. 创建新元素 const newDiv = document.createElement('div'); newDiv.className = 'new-item'; newDiv.innerText = '新增的末尾元素'; // 2. 获取父元素 const parent = document.getElementById('parent-container'); // 3. 追加到父元素末尾 const addedNode = parent.appendChild(newDiv); console.log(addedNode === newDiv); // true（返回被添加的节点） // 4. 移动已有元素（而非复制） const existingNode = document.getElementById('existing-item'); parent.appendChild(existingNode); // existingNode会从原有位置移动到parent末尾 

2. append ()：灵活追加多个节点 / 字符串（ES6+）

核心功能：向父节点末尾追加一个或多个节点，或直接追加字符串（会自动转为文本节点），功能比appendChild更强大。语法：parentNode.append(node1, node2, ..., string1, string2, ...)与 appendChild 的核心区别：

实战示例：

javascript

运行

const parent = document.getElementById('parent-container'); // 1. 追加多个节点 const div1 = document.createElement('div'); div1.innerText = '节点1'; const div2 = document.createElement('div'); div2.innerText = '节点2'; parent.append(div1, div2); // 2. 追加节点+字符串 const div3 = document.createElement('div'); div3.innerText = '节点3'; parent.append(div3, '直接追加的文本内容'); // 字符串自动转为文本节点 // 3. 对比appendChild（仅能单个节点） // parent.appendChild(div1, div2); // 报错：参数过多 

3. prepend ()：向父元素开头追加节点 / 字符串（ES6+）

核心功能：与append()功能类似，但会将内容添加到父节点的子节点列表开头，而非末尾。语法：parentNode.prepend(node1, node2, ..., string1, string2, ...)特点：支持多参数、支持字符串直接追加、无返回值，是 “向开头添加元素” 的便捷方法。

实战示例：

javascript

运行

const parent = document.getElementById('parent-container'); const newItem = document.createElement('p'); newItem.innerText = '添加到开头的元素'; // 向父元素开头追加 parent.prepend(newItem, '开头的文本内容'); // 此时newItem是parent的第一个子元素 

4. appendChild vs append vs prepend 适用场景总结

• 若需兼容低版本浏览器（如 IE11），优先使用appendChild()；
• 若需一次性添加多个元素 / 字符串，且无需兼容低版本浏览器，优先使用append()（末尾）/prepend()（开头）；
• 若需要获取被添加的节点引用，使用appendChild()（append/prepend无返回值）。

三、第二类：删除元素 —— 从 DOM 中移除节点

删除元素的核心是将目标节点从其父元素中移除，常用方法有 3 种，涵盖直接删除、间接删除等场景：

1. removeChild ()：父元素删除子元素（传统方法）

核心功能：通过父元素找到并删除指定的子元素，是兼容所有浏览器的传统删除方法。语法：parentNode.removeChild(childNode)特点：

• 必须通过父元素调用，且需传入要删除的子元素节点；
• 返回值为被删除的节点（可用于后续复用该节点）；
• 若childNode不是parentNode的子元素，会抛出NotFoundError。

实战示例：

javascript

运行

// 1. 获取父元素和要删除的子元素 const parent = document.getElementById('parent-container'); const childToRemove = document.getElementById('child-to-delete'); // 2. 删除子元素（推荐：先判断是否为子元素，避免报错） if (parent.contains(childToRemove)) { const removedNode = parent.removeChild(childToRemove); console.log(removedNode === childToRemove); // true（返回被删除的节点） // 可复用被删除的节点（重新添加到DOM中） // parent.appendChild(removedNode); } 

2. remove ()：元素自行删除（ES6+）

核心功能：目标元素直接调用该方法，自行从 DOM 中移除，无需通过父元素操作，更简洁高效。语法：childNode.remove()特点：

• 无需获取父元素，直接操作目标节点；
• 无返回值（undefined）；
• 低版本浏览器（如 IE11）不支持，需转译或降级使用removeChild()。

实战示例：

javascript

运行

// 获取要删除的元素 const childToRemove = document.getElementById('child-to-delete'); // 直接删除（无需父元素） childToRemove.remove(); // 对比removeChild（需父元素） // const parent = childToRemove.parentElement; // parent.removeChild(childToRemove); 

3. 间接删除：替换法 / 清空法

场景 1：清空父元素下所有子元素（无需逐个删除）

javascript

运行

const parent = document.getElementById('parent-container'); // 方法1：innerHTML 清空（简单粗暴） parent.innerHTML = ''; // 方法2：循环删除子元素（更安全，避免innerHTML可能的XSS风险） while (parent.firstChild) { parent.removeChild(parent.firstChild); } 

场景 2：通过替换元素间接删除（后续详解replaceChild）

javascript

运行

// 用空节点替换目标节点，间接实现删除 const parent = document.getElementById('parent-container'); const childToRemove = document.getElementById('child-to-delete'); const emptyNode = document.createTextNode(''); parent.replaceChild(emptyNode, childToRemove); 

4. 删除方法适用场景总结

• 若需兼容低版本浏览器，或需要复用被删除的节点，优先使用removeChild()；
• 若无需兼容低版本浏览器，且操作简单，优先使用remove()（代码更简洁）；
• 若需清空父元素所有子元素，优先使用innerHTML = ''（简单）或循环removeChild（安全）。

四、第三类：替换元素 —— 替换 DOM 中的已有节点

替换元素是将原有节点替换为新节点，核心方法有 2 种，分别对应传统用法和现代用法：

1. replaceChild ()：父元素替换子元素（传统方法）

核心功能：用新节点替换父元素中的指定子节点，是兼容所有浏览器的替换方法。语法：parentNode.replaceChild(newNode, oldNode)特点：

• 必须通过父元素调用，传入 “新节点” 和 “要被替换的旧节点”；
• 返回值为被替换的旧节点（可复用）；
• 若oldNode不是parentNode的子元素，会抛出NotFoundError。

实战示例：

javascript

运行

// 1. 创建新节点 const newNode = document.createElement('div'); newNode.className = 'new-replace-item'; newNode.innerText = '替换后的新元素'; // 2. 获取父元素和要被替换的旧节点 const parent = document.getElementById('parent-container'); const oldNode = document.getElementById('old-item'); // 3. 替换节点（先判断，避免报错） if (parent.contains(oldNode)) { const replacedNode = parent.replaceChild(newNode, oldNode); console.log(replacedNode === oldNode); // true（返回被替换的旧节点） } 

2. replaceWith ()：元素自行被替换（ES6+）

核心功能：目标节点直接调用该方法，被新节点 / 字符串替换，无需通过父元素操作，更简洁。语法：oldNode.replaceWith(newNode1, newNode2, ..., string1, ...)特点：

• 无需获取父元素，直接操作目标节点；
• 支持多个新节点 / 字符串（会依次替换旧节点，添加到旧节点的原有位置）；
• 无返回值（undefined）；
• 低版本浏览器（如 IE11）不支持。

实战示例：

javascript

运行

// 1. 获取要被替换的旧节点 const oldNode = document.getElementById('old-item'); // 2. 用单个新节点替换 const newNode1 = document.createElement('div'); newNode1.innerText = '单个新节点替换'; oldNode.replaceWith(newNode1); // 3. 用多个节点/字符串替换 const newNode2 = document.createElement('div'); newNode2.innerText = '新节点1'; oldNode.replaceWith(newNode2, '替换的文本', document.createElement('span')); // 此时旧节点被移除，原有位置变为 newNode2 + 文本 + span 节点 

3. 替换方法适用场景总结

• 兼容低版本浏览器：使用replaceChild()；
• 现代项目（无需兼容 IE）：使用replaceWith()（代码更简洁，支持多参数）；
• 若需要复用被替换的旧节点：使用replaceChild()（返回旧节点）。

五、第四类：插入元素 —— 在指定位置插入节点

插入元素是指在 “非开头 / 非末尾” 的自定义位置插入节点（如在某个元素之前 / 之后插入），核心方法有 2 种：

1. insertBefore ()：在指定元素之前插入节点（传统方法）

核心功能：将新节点插入到父元素中 “参考节点” 的前面，是精准插入元素的基础方法。语法：parentNode.insertBefore(newNode, referenceNode)关键说明：

• referenceNode：参考节点（新节点将插入到该节点之前）；
• 若referenceNode为null，则效果等同于appendChild()（插入到末尾）；
• 返回值为被插入的newNode节点；
• 兼容所有浏览器。

实战示例：

javascript

运行

// 1. 创建新节点 const newNode = document.createElement('div'); newNode.innerText = '插入到参考节点之前的元素'; // 2. 获取父元素和参考节点 const parent = document.getElementById('parent-container'); const referenceNode = document.getElementById('reference-item'); // 3. 插入到参考节点之前 if (parent.contains(referenceNode)) { const insertedNode = parent.insertBefore(newNode, referenceNode); console.log(insertedNode === newNode); // true } // 4. 若referenceNode为null，插入到末尾 // parent.insertBefore(newNode, null); // 等同于parent.appendChild(newNode) 

2. insertAdjacentElement ()：灵活插入到元素周围（现代方法）

核心功能：将新节点插入到目标元素的前后左右四个精准位置，支持更灵活的插入场景，无需依赖父元素。语法：targetElement.insertAdjacentElement(position, newNode)position 参数（4 个可选值）：

特点：

• 无需获取父元素，直接通过目标元素操作；
• 插入位置更灵活（支持外部插入）；
• 返回值为被插入的newNode节点（插入失败返回null）；
• 兼容 IE9+，现代项目优先使用。

实战示例：

html

预览

<!-- 初始结构 --> <div> <div>目标元素</div> </div> 

javascript

运行

const target = document.getElementById('target'); const newNode = document.createElement('div'); newNode.innerText = '插入的元素'; // 1. beforebegin：目标元素外部前面 target.insertAdjacentElement('beforebegin', newNode); // 结构变为：<div>插入的元素</div> <div>目标元素</div> // 2. afterbegin：目标元素内部开头 target.insertAdjacentElement('afterbegin', newNode); // 结构变为：<div><div>插入的元素</div>目标元素</div> // 3. beforeend：目标元素内部末尾 target.insertAdjacentElement('beforeend', newNode); // 结构变为：<div>目标元素<div>插入的元素</div></div> // 4. afterend：目标元素外部后面 target.insertAdjacentElement('afterend', newNode); // 结构变为：<div>目标元素</div> <div>插入的元素</div> 

补充：insertAdjacentHTML/Text ()—— 直接插入 HTML / 文本

• insertAdjacentHTML(position, htmlString)：直接插入 HTML 字符串（无需创建节点）；
• insertAdjacentText(position, textString)：直接插入纯文本（避免 XSS 风险）；

javascript

运行

const target = document.getElementById('target'); // 插入HTML target.insertAdjacentHTML('afterend', '<div>插入的HTML</div>'); // 插入文本 target.insertAdjacentText('beforebegin', '插入的纯文本'); 

3. 插入方法适用场景总结

• 需兼容低版本浏览器，且在参考节点前插入：使用insertBefore()；
• 现代项目，需要灵活插入（尤其是外部插入）：使用insertAdjacentElement()；
• 无需创建节点，直接插入 HTML / 文本：使用insertAdjacentHTML()/insertAdjacentText()；
• 仅需插入到开头 / 末尾：优先使用prepend()/append()（更简洁）。

六、实战总结：DOM 元素操作方法速查表

七、注意事项：避免 DOM 操作的常见坑

1. 操作不存在的节点报错：操作前先判断节点是否存在（如if (node)、parent.contains(child)）；
2. const声明的节点可操作：const声明的是节点引用，而非节点本身，可正常执行remove()、appendChild()等操作；
3. innerHTML 的 XSS 风险：插入用户输入的内容时，优先使用textContent或insertAdjacentText()，避免 XSS 攻击。

频繁 DOM 操作导致性能损耗：多次添加 / 删除元素时，先将节点脱离 DOM（如使用文档片段DocumentFragment），批量操作后再挂载到 DOM 中；javascript运行

// 优化：用DocumentFragment批量添加节点 const fragment = document.createDocumentFragment(); for (let i = 0; i < 10; i++) { const div = document.createElement('div'); div.innerText = `批量元素${i}`; fragment.appendChild(div); } document.getElementById('parent').appendChild(fragment); // 仅一次DOM操作 

八、结尾：掌握 DOM 操作，提升前端交互能力

DOM 元素的添加、删除、替换、插入，是前端开发的基础技能，也是实现页面动态交互的核心。本文梳理的各类方法，既有兼容旧浏览器的传统用法，也有简洁高效的现代 API，掌握它们的差异和适用场景，能让你在开发中更灵活地操作 DOM，写出更高效、更健壮的代码。

值得注意的是，在现代前端框架（React、Vue）中，我们很少直接操作 DOM，但理解 DOM 操作的本质，能帮助我们更好地理解框架的底层原理，排查框架封装后的 DOM 相关问题。无论是原生开发还是框架开发，DOM 操作的基础知识都不可或缺。

最后用一句话总结：DOM 元素操作的核心是 “定位节点 + 选择合适的方法”，选对方法，既能提升开发效率，又能优化页面性能。