在前端开发中，通过JavaScript操作DOM实现元素的添加和删除是非常基础且常用的功能，无论是动态渲染列表、实现弹窗交互还是更新页面内容，都需要用到相关的操作方法。
JS添加元素的常用方法
1. 创建元素节点
在添加元素之前，首先需要创建对应的元素节点，使用document.createElement()方法即可，该方法接收一个标签名字符串作为参数，返回创建好的元素节点。
// 创建一个div元素
const newDiv = document.createElement('div');
// 设置元素的内容和属性
newDiv.textContent = '我是新添加的div元素';
newDiv.className = 'new-item';
2. appendChild方法
appendChild()是父节点的方法，用于将创建好的子节点添加到父节点的子节点列表的末尾。如果传入的节点已经是文档中的节点，会将该节点移动到新的位置。
// 获取父容器
const container = document.getElementById('container');
// 将新创建的div添加到容器末尾
container.appendChild(newDiv);
3. insertBefore方法
如果需要在指定子节点之前插入新元素，可以使用insertBefore()方法，该方法接收两个参数：要插入的新节点，以及作为参考的已有子节点。如果不传入第二个参数，效果和appendChild一致。
// 获取父容器和参考子节点
const container = document.getElementById('container');
const referenceNode = document.querySelector('.old-item');
// 在referenceNode之前插入新元素
container.insertBefore(newDiv, referenceNode);
4. 其他添加方式
除了上述基础方法，还可以使用innerHTML直接拼接HTML字符串添加元素，不过这种方式会覆盖原有节点的事件监听，适合简单的静态内容添加。
const container = document.getElementById('container');
// 追加新的HTML内容
container.innerHTML += '<div class="new-item">通过innerHTML添加的元素</div>';
JS删除元素的常用方法
1. removeChild方法
removeChild()是父节点的方法，用于删除指定的子节点，需要传入要删除的子节点作为参数，返回被删除的节点。
const container = document.getElementById('container');
const targetNode = document.querySelector('.delete-item');
// 删除指定子节点
const removedNode = container.removeChild(targetNode);
console.log('被删除的节点是：', removedNode);
2. remove方法
remove()是元素节点自身的方法，调用后会直接将该元素从DOM树中移除，不需要通过父节点操作，使用更加简洁。
const targetNode = document.querySelector('.delete-item');
// 直接移除元素自身
targetNode.remove();
3. 清空容器内所有子元素
如果需要清空某个容器的所有子元素，可以将容器的innerHTML设置为空字符串，或者循环调用removeChild删除所有子节点。
const container = document.getElementById('container');
// 方式一：设置innerHTML为空
container.innerHTML = '';
// 方式二：循环删除所有子节点
while (container.firstChild) {
container.removeChild(container.firstChild);
}
方法对比与注意事项
不同添加删除方法的适用场景有所差异，以下是常用方法的对比：
| 方法 | 作用 | 适用场景 |
|---|---|---|
| appendChild | 在父节点末尾添加子节点 | 需要在容器最后添加元素时 |
| insertBefore | 在指定子节点前添加元素 | 需要在指定位置插入元素时 |
| removeChild | 父节点删除指定子节点 | 需要通过父节点操作删除子节点时 |
| remove | 元素自身移除 | 直接获取目标元素后删除时 |
在使用这些方法时需要注意，操作的元素必须是已经存在于DOM树中或者是新创建的节点，避免出现空指针错误。另外频繁操作DOM会影响页面性能，建议合并多次操作后再统一更新页面。
JavaScriptaddElementremoveElementDOM操作修改时间：2026-06-11 08:24:24