DOM 添加节点：从基础方法到实战技巧

1. 引言

在 Web 开发中，动态操作 DOM 是前端工程师的必备技能。无论是渲染列表、加载更多内容，还是实现交互反馈，都离不开向页面中添加节点。本文将系统讲解 DOM 添加节点的核心方法、使用场景和注意事项，并通过丰富的代码实例帮助你快速掌握。

2. 认识 DOM 节点

在开始添加节点之前，先了解 DOM 节点的基本概念。DOM（Document Object Model）将 HTML 文档抽象为一棵节点树，常见的节点类型包括元素节点、文本节点和属性节点。

以下代码展示了如何获取和检查节点类型：

// 获取页面中的元素节点
const container = document.getElementById('container');

// 检查节点类型：1 表示元素节点，3 表示文本节点
console.log(container.nodeType); // 1
console.log(container.firstChild.nodeType); // 3

// 获取节点名称
console.log(container.nodeName); // DIV

理解节点类型有助于在添加节点时选择合适的 API，避免因类型不匹配而出现意外错误。

3. 使用 appendChild 添加子节点

appendChild 是最基础的添加节点方法，它将一个新节点追加到指定父节点的子节点列表末尾。

// HTML: <ul id="list"></ul>

const list = document.getElementById('list');

// 创建新的 li 元素
const newItem = document.createElement('li');
newItem.textContent = '苹果';

// 将 li 追加到 ul 中
list.appendChild(newItem);

// 可以连续添加多个节点
const secondItem = document.createElement('li');
secondItem.textContent = '香蕉';
list.appendChild(secondItem);

执行后，页面中的列表会依次显示「苹果」和「香蕉」。需要注意的是，appendChild 一次只能添加一个节点，如果需要批量添加，可以结合循环使用。

3.1 批量添加节点

const fruits = ['苹果', '香蕉', '橙子', '葡萄'];
const list = document.getElementById('list');

fruits.forEach(fruit => {
const li = document.createElement('li');
li.textContent = fruit;
list.appendChild(li);
});

4. 使用 insertBefore 在指定位置插入节点

当需要在某个子节点之前插入新节点时，可以使用 insertBefore 方法。它接收两个参数：要插入的新节点和参考节点。

// HTML: <ul id="list"><li>苹果</li><li>香蕉</li></ul>

const list = document.getElementById('list');
const banana = list.children[1]; // 获取第二个 li

// 创建新节点
const newItem = document.createElement('li');
newItem.textContent = '草莓';

// 在香蕉之前插入草莓
list.insertBefore(newItem, banana);

执行后，列表顺序变为：苹果、草莓、香蕉。如果参考节点为 null，insertBefore 的行为等同于 appendChild，将节点追加到末尾。

5. 使用 insertAdjacentHTML 快速插入 HTML

insertAdjacentHTML 允许直接插入 HTML 字符串，无需先创建元素节点，非常适合快速渲染模板内容。它支持四个位置参数：beforebegin、afterbegin、beforeend、afterend。

// HTML: <div id="box">原有内容</div>

const box = document.getElementById('box');

// 在元素内部开头插入
box.insertAdjacentHTML('afterbegin', '<p>开头内容</p>');

// 在元素内部末尾插入
box.insertAdjacentHTML('beforeend', '<p>末尾内容</p>');

// 在元素外部前面插入
box.insertAdjacentHTML('beforebegin', '<hr>');

// 在元素外部后面插入
box.insertAdjacentHTML('afterend', '<hr>');

使用 insertAdjacentHTML 时要注意，插入的 HTML 字符串不会被转义，如果内容包含用户输入，需要先进行安全处理，防止 XSS 攻击。

6. 使用 insertAdjacentElement 插入元素节点

与 insertAdjacentHTML 类似，insertAdjacentElement 用于插入元素节点，而不是 HTML 字符串。它同样支持四个位置参数。

const box = document.getElementById('box');
const newDiv = document.createElement('div');
newDiv.textContent = '动态创建的元素';

// 在元素内部末尾插入
box.insertAdjacentElement('beforeend', newDiv);

这种方法适合已经创建好元素节点、需要精确控制插入位置的场景。

7. 使用 cloneNode 复制节点

当需要复制已有节点时，可以使用 cloneNode 方法。它接收一个布尔参数，true 表示深拷贝（连同子节点一起复制），false 表示浅拷贝（只复制当前节点）。

// HTML: <div id="card"><p>卡片内容</p></div>

const card = document.getElementById('card');

// 深拷贝：连同子节点一起复制
const deepClone = card.cloneNode(true);

// 浅拷贝：只复制 div 本身，不包含子节点
const shallowClone = card.cloneNode(false);

// 将深拷贝的节点添加到页面
document.body.appendChild(deepClone);

复制节点时需要注意，cloneNode 不会复制事件监听器，如果需要保留事件，需要手动重新绑定。

8. 使用 DocumentFragment 批量添加节点

当需要一次性添加大量节点时，直接逐个 appendChild 会导致多次重排，影响性能。DocumentFragment 是一个轻量级的文档片段容器，可以先将节点添加到片段中，再一次性插入到页面。

// 创建 DocumentFragment
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = '项目 ' + i;
fragment.appendChild(li);
}

// 一次性将片段中的所有节点插入到列表
const list = document.getElementById('list');
list.appendChild(fragment);

使用 DocumentFragment 可以显著减少页面重排次数，提升大批量渲染的性能。

9. 使用 innerHTML 批量添加内容

innerHTML 是最直观的添加内容方式，它可以直接设置元素的 HTML 内容。适合一次性渲染整块模板的场景。

const container = document.getElementById('container');

// 直接设置 HTML 内容
container.innerHTML = `
<h3>商品列表</h3>
<ul>
<li>商品 A</li>
<li>商品 B</li>
<li>商品 C</li>
</ul>
`;

使用 innerHTML 时需要注意：它会替换元素原有的全部内容；如果内容包含用户输入，必须进行转义处理，避免 XSS 安全风险。

10. 实战：动态渲染商品列表

下面通过一个完整的实战案例，综合运用前面介绍的方法，实现一个动态商品列表。

// 模拟商品数据
const products = [
{ name: '手机', price: 2999 },
{ name: '电脑', price: 5999 },
{ name: '耳机', price: 399 }
];

// 渲染商品列表
function renderProducts(products) {
const list = document.getElementById('product-list');
const fragment = document.createDocumentFragment();

products.forEach(product => {
const li = document.createElement('li');
li.className = 'product-item';

const nameSpan = document.createElement('span');
nameSpan.textContent = product.name;

const priceSpan = document.createElement('span');
priceSpan.textContent = '￥' + product.price;

li.appendChild(nameSpan);
li.appendChild(priceSpan);
fragment.appendChild(li);
});

list.appendChild(fragment);
}

// 调用渲染函数
renderProducts(products);

这个案例展示了如何结合 createElement、appendChild 和 DocumentFragment 高效地渲染动态数据。

11. 常见问题与注意事项

在使用 DOM 添加节点时，有几个常见问题需要特别留意：

• 节点重复添加：同一个节点只能存在于文档中的一个位置，重复 appendChild 会将节点从原位置移动到新位置。
• XSS 安全风险：使用 innerHTML 或 insertAdjacentHTML 插入用户输入内容时，必须先进行转义处理。
• 性能优化：批量添加节点时优先使用 DocumentFragment，减少页面重排次数。
• 事件绑定：动态创建的节点不会自动继承事件监听器，需要手动绑定或使用事件委托。

12. 总结

本文系统介绍了 DOM 添加节点的多种方法，包括 appendChild、insertBefore、insertAdjacentHTML、cloneNode、DocumentFragment 和 innerHTML 等。每种方法都有其适用场景：基础添加使用 appendChild，指定位置插入使用 insertBefore，快速渲染模板使用 insertAdjacentHTML，批量高性能渲染使用 DocumentFragment。在实际开发中，应根据具体需求选择合适的方法，并注意安全性和性能优化。