1. 引言在 Web 开发中动态操作 DOM 是前端工程师的必备技能。无论是渲染列表、加载更多内容还是实现交互反馈都离不开向页面中添加节点。本文将系统讲解 DOM 添加节点的核心方法、使用场景和注意事项并通过丰富的代码实例帮助你快速掌握。2. 认识 DOM 节点在开始添加节点之前先了解 DOM 节点的基本概念。DOMDocument 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 idlist/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 idlistli苹果/lili香蕉/li/ul const list document.getElementById(list); const banana list.children[1]; // 获取第二个 li // 创建新节点 const newItem document.createElement(li); newItem.textContent 草莓; // 在香蕉之前插入草莓 list.insertBefore(newItem, banana);执行后列表顺序变为苹果、草莓、香蕉。如果参考节点为nullinsertBefore的行为等同于appendChild将节点追加到末尾。5. 使用 insertAdjacentHTML 快速插入 HTMLinsertAdjacentHTML允许直接插入 HTML 字符串无需先创建元素节点非常适合快速渲染模板内容。它支持四个位置参数beforebegin、afterbegin、beforeend、afterend。// HTML: div idbox原有内容/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 idcardp卡片内容/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。在实际开发中应根据具体需求选择合适的方法并注意安全性和性能优化。