CodeWalk

DOM 操作有哪些常用的方法？如何创建/插入/删除节点？

作者：我是大山 · 2026-05-30 12:55

请列举 DOM 节点操作中最常用的 CRUD 方法，包括创建、插入、替换、删除和克隆节点。

回答

我是大山

创建节点：

  • document.createElement(tagName) — 创建元素节点
  • document.createTextNode(text) — 创建文本节点
  • document.createDocumentFragment() — 创建文档片段（批量操作提升性能）
  • elem.cloneNode(deep) — 克隆节点（deep=true 深克隆含子节点）

插入节点：

  • parent.appendChild(child) — 末尾插入
  • parent.insertBefore(newChild, referenceChild) — 在参考节点前插入
  • parent.prepend(child) / parent.append(child) — 新 API，支持多个节点和字符串
  • elem.insertAdjacentHTML(position, html) — 解析 HTML 字符串并插入（beforebegin/afterbegin/beforeend/afterend）

替换/删除节点：

  • parent.replaceChild(newChild, oldChild) — 替换
  • parent.removeChild(child) — 删除子节点（返回被删除节点）
  • elem.remove() — 直接移除自身（现代浏览器支持）

示例：

const div = document.createElement('div');
div.textContent = 'Hello';
document.body.appendChild(div);
// 文档片段批量插入
const frag = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  frag.appendChild(document.createElement('li'));
}
ul.appendChild(frag); // 一次回流