DOM节点操作

DOM节点操作是网页动态交互的基础，掌握节点增删改查是前端开发必备技能。

创建节点

createElement

创建元素节点：

const div = document.createElement('div');
div.textContent = '新元素';

createTextNode

创建文本节点：

const text = document.createTextNode('文本内容');

createDocumentFragment

创建文档片段（减少重绘）：

const fragment = document.createDocumentFragment();

插入节点

appendChild

在父节点末尾添加子节点：

parent.appendChild(child);

insertBefore

在参考节点前插入新节点：

parent.insertBefore(newNode, referenceNode);

append / prepend

在父节点末尾/开头添加多个节点：

parent.append(child1, child2);
parent.prepend(child0);

删除节点

removeChild

父节点删除子节点：

parent.removeChild(child);

remove

节点删除自身：

element.remove();

替换节点

replaceChild

用新节点替换旧节点：

parent.replaceChild(newNode, oldNode);

replaceWith

用新节点替换自身：

element.replaceWith(newNode);

克隆节点

cloneNode

克隆节点，参数为true时深克隆：

const shallow = element.cloneNode();      // 浅克隆
const deep = element.cloneNode(true);     // 深克隆（包含子节点）

节点关系属性

注意：cloneNode(true) 会克隆子节点，但不会克隆事件监听器。

要点总结

1. 创建节点用 createElement 和 createTextNode
2. 插入节点用 appendChild、insertBefore 或 append/prepend
3. 删除节点用 removeChild 或 remove
4. 克隆节点时 cloneNode(true) 包含子节点
5. 批量操作时使用 createDocumentFragment 提升性能