悠悠楠杉
网站页面
JavaScript中DOM节点的添加与删除
11/16
深入讲解JavaScript中如何通过原生方法添加和删除DOM节点，涵盖常用API的实际应用场景与注意事项，帮助开发者掌握动态修改页面结构的核心技能。
在前端开发中，我们常常需要根据用户行为或数据变化来动态更新网页内容。这种能力的核心，就是对DOM（文档对象模型）的操作。其中，添加和删除节点是最基础也最频繁使用的功能之一。掌握这些操作，不仅能提升页面交互性，还能让应用更加灵活高效。
创建并添加节点
要向页面中插入新的元素，首先需要创建这个元素。JavaScript提供了document.createElement()方法，它可以创建指定标签名的元素节点。比如，我们要添加一个段落：
javascript
const newParagraph = document.createElement('p');
newParagraph.textContent = '这是一段新添加的文字。';
此时，元素已经存在于内存中，但还未出现在页面上。为了让它显示出来，必须将它“挂载”到某个已存在的父节点上。最常见的方法是使用appendChild()：
javascript
document.body.appendChild(newParagraph);
这样，新创建的 <p> 元素就会被追加到 <body> 的末尾。如果你希望把节点插入到某个特定位置，而不是末尾，可以使用insertBefore()方法。例如，在某个标题之前插入提示信息：
javascript
const heading = document.querySelector('h1');
const warning = document.createElement('div');
warning.textContent = '请注意：以下内容可能涉及敏感信息。';
warning.style.color = 'red';
document.body.insertBefore(warning, heading);
这里，insertBefore()接收两个参数：第一个是要插入的新节点，第二个是作为参考点的现有节点。新节点会被插入到参考节点之前。
此外，还有一种现代浏览器支持的更简洁方式——before()、after()、prepend() 和 append()。它们可以直接在任意元素上调用，无需先获取父节点。例如：
javascript
heading.before(warning); // 插入到h1之前
这种方式语义清晰，代码更易读，适合现代项目使用。
删除DOM节点
有增就有减。当我们不再需要某个元素时，就需要将其从DOM树中移除。删除节点的方法是removeChild()，但它必须由父节点调用：
javascript
const target = document.getElementById('toBeRemoved');
if (target && target.parentNode) {
target.parentNode.removeChild(target);
}
这段代码先检查目标元素是否存在，并确保它有父节点，然后再执行删除操作，避免报错。
不过，从ES6开始，我们可以直接调用节点自身的remove()方法，更加直观：
javascript
target.remove();
一行代码即可完成删除，无需再访问父节点，大大简化了逻辑。这一特性已被主流浏览器广泛支持，推荐在现代开发中优先使用。
实际应用场景
设想一个待办事项列表应用。每当用户输入一项任务并点击“添加”，程序就应创建一个新的列表项并加入页面。而当用户点击“删除”按钮时，对应的任务项应当消失。
实现思路如下：
javascript
const list = document.getElementById('taskList');
const input = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
addButton.addEventListener('click', () => {
if (input.value.trim() === '') return;
const li = document.createElement('li');
li.textContent = input.value;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '删除';
deleteBtn.onclick = () => li.remove(); // 点击即删除自身
li.appendChild(deleteBtn);
list.appendChild(li);
input.value = '';
});
在这个例子中，我们不仅动态添加了任务项，还为每个项绑定了独立的删除功能。这种组合运用充分体现了DOM操作的灵活性。
注意事项
虽然DOM操作强大，但也需谨慎使用。频繁地添加删除节点可能导致性能问题，尤其是在循环中。建议批量操作时使用文档片段（DocumentFragment）进行优化。同时，删除节点后应解除事件监听，防止内存泄漏。
掌握这些技巧，你就能自如地构建出真正“活”的网页界面。
