DOM 节点插入的 6 种常用方法总结

在前端开发中，DOM 节点操作是基础中的基础！掌握不同的插入方法可以让你更灵活地控制页面元素的布局和动态内容。下面详细解析 6 种常用的 DOM 节点插入方法：

1. parent.appendChild(child)

插入位置：插入到父元素的末尾（最后一个子节点之后）

示例代码：

const newDiv = document.createElement('div');
newDiv.innerText = "我是新来的！";
const container = document.querySelector('#container');

// 插入到容器最后面
container.appendChild(newDiv);

特点：

• 最基础的插入方法
• 只能插入到父元素的末尾
• 如果元素已存在，会先移除再插入

2. parent.insertBefore(child, targetChild)

插入位置：插入到指定的子节点之前

示例代码：

const newDiv = document.createElement('div');
newDiv.innerText = "我要插队！";
const container = document.querySelector('#container');

// 插入到第一个子节点前面
container.insertBefore(newDiv, container.children[0]);

// 插入到特定元素前面
const targetElement = document.querySelector('.target');
container.insertBefore(newDiv, targetElement);

特点：

• 可以精确控制插入位置
• 需要指定参考节点
• 如果参考节点为null，效果等同于appendChild

3. element.insertAdjacentElement(position, newElement)

插入位置：更灵活的插入方式，支持4种位置值

示例代码：

const newDiv = document.createElement('div');
newDiv.innerText = "灵活插入！";
const container = document.querySelector('#container');

// 四种插入位置演示
container.insertAdjacentElement('beforebegin', newDiv); // 元素本身之前
container.insertAdjacentElement('afterbegin', newDiv);  // 元素内部最前面
container.insertAdjacentElement('beforeend', newDiv);   // 元素内部最后面
container.insertAdjacentElement('afterend', newDiv);    // 元素本身之后

4. element.before(newElement)

插入位置：插入到当前元素前面（同级）

示例代码：

const newDiv = document.createElement('div');
newDiv.innerText = "我在你前面！";
const target = document.querySelector('.target');

// 插入到目标元素前面
target.before(newDiv);

特点：

• 现代浏览器支持的方法
• 语法简洁直观
• 插入同级元素

5. element.after(newElement)

插入位置：插入到当前元素后面（同级）

示例代码：

const newDiv = document.createElement('div');
newDiv.innerText = "我在你后面！";
const target = document.querySelector('.target');

// 插入到目标元素后面
target.after(newDiv);

特点：

• 与before()方法对应
• 插入同级元素
• 现代浏览器支持

6. element.prepend(newElement)

插入位置：插入到当前元素的最前面（第一个子节点）

示例代码：

const newDiv = document.createElement('div');
newDiv.innerText = "我是第一个！";
const container = document.querySelector('#container');

// 插入到容器最前面
container.prepend(newDiv);

特点：

• 与appendChild()方法对应
• 插入到子元素列表的最前面
• 现代浏览器支持

insertAdjacentElement 位置值详解

综合示例演示

// 创建新元素
const newDiv = document.createElement('div');
newDiv.innerText = "我是新来的！";
newDiv.className = "new-element";

const container = document.querySelector('#container');

// 6种插入方法完整演示
console.log("=== DOM节点插入方法演示 ===");

// 1. 插入到容器最前面
container.prepend(newDiv.cloneNode(true));
console.log("1. prepend() - 插入到最前面");

// 2. 插入到容器最后面  
container.appendChild(newDiv.cloneNode(true));
console.log("2. appendChild() - 插入到最后面");

// 3. 插入到容器前面（外部同级）
container.before(newDiv.cloneNode(true));
console.log("3. before() - 插入到前面（同级）");

// 4. 插入到容器后面（外部同级）
container.after(newDiv.cloneNode(true));
console.log("4. after() - 插入到后面（同级）");

// 5. 使用insertBefore插入到特定位置
if (container.children.length > 0) {
    container.insertBefore(newDiv.cloneNode(true), container.children[1]);
    console.log("5. insertBefore() - 插入到第二个子节点前");
}

// 6. 使用insertAdjacentElement精准控制
container.insertAdjacentElement('afterbegin', newDiv.cloneNode(true));
console.log("6. insertAdjacentElement() - 内部最前面插入");

方法选择指南

最佳实践建议

1. 性能考虑：尽量减少DOM操作，批量插入时使用DocumentFragment
2. 兼容性：现代项目推荐使用新方法，老项目注意兼容性处理
3. 代码可读性：选择语义清晰的方法，提高代码可维护性
4. 错误处理：插入前检查元素是否存在，避免运行时错误

// 性能优化示例：使用DocumentFragment批量插入
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    fragment.appendChild(div);
}
container.appendChild(fragment); // 一次性插入，减少重排