如何创建和添加DOM节点？

动态地创建和插入DOM节点是构建交互式Web应用的基础技能。无论是根据数据渲染列表，还是响应用户操作添加新内容，你都需要掌握将虚拟元素变为页面中实际节点的过程。

创建新节点

创建元素节点的核心方法是document.createElement(tagName)。它会创建一个指定标签名的元素，但这个元素还处于“游离”状态，并未插入到文档中。

const newDiv = document.createElement('div');
const newListItem = document.createElement('li');

创建后，你可以像操作任何现有元素一样配置这个新节点，比如设置属性、类名、样式或内部内容。

newDiv.id = 'unique-id';
newDiv.className = 'box highlight';
newDiv.textContent = 'Hello World';
// 或使用 innerHTML (注意安全风险)
// newDiv.innerHTML = '<strong>Bold</strong> Text';

将节点插入DOM

创建并配置好节点后，需要将它插入到文档树中的某个位置才能显示。最常用的方法是appendChild()和insertBefore()。

const parent = document.getElementById('container');
// 追加到父元素内部末尾
parent.appendChild(newDiv);

// 在某个参考子节点之前插入
const referenceNode = document.querySelector('.reference');
parent.insertBefore(newDiv, referenceNode);

appendChild总是将节点添加到父元素子节点列表的末尾。insertBefore则允许你指定新节点插入在哪个现有子节点之前。

现代插入方法：insertAdjacentHTML与insertAdjacentElement

element.insertAdjacentHTML(position, text)是一个功能强大且高效的方法。它解析给定的HTML字符串，并将生成的节点插入到相对于调用元素的指定位置。

const container = document.querySelector('#container');
container.insertAdjacentHTML('beforeend', '<p>新的段落</p>');

position参数有四个可选值：‘beforebegin’（元素之前）、‘afterbegin’（元素内部开头）、‘beforeend’（元素内部末尾）、‘afterend’（元素之后）。它避免了先创建元素再插入的两步操作，性能通常更好。

与之对应的insertAdjacentElement(position, element)则用于直接插入一个已存在的元素节点。

批量插入与性能优化

如果需要插入大量节点，频繁操作DOM会引发严重的性能问题，因为每次插入都会触发浏览器的重排。解决方案是使用文档片段（DocumentFragment）。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

文档片段是一个轻量的虚拟容器。你可以将多个节点先附加到片段中，最后再将整个片段一次性插入到DOM。这样只会触发一次重排，极大提升了性能。

在现代前端框架（如React、Vue）的底层，这些DOM操作被抽象和优化了。但在编写库、直接操作DOM或处理没有框架的小型项目时，理解这些基础API至关重要。选择正确的方法能让你的页面更新既流畅又高效。