添加和删除DOM节点需先创建并插入或直接移除。1. 用document.createElement()创建节点，appendChild()或insertBefore()插入；2. 用removeChild()或更简洁的remove()方法删除节点，推荐使用后者。
在JavaScript中操作DOM节点是前端开发的常见任务。添加和删除节点可以通过内置的DOM方法轻松实现，下面分别介绍具体用法。
添加DOM节点
要添加一个新节点到页面中，通常分两步：创建节点，然后将其插入到目标位置。
1. 创建节点：使用 document.createElement() 创建新元素。
2. 插入节点：使用 appendChild() 或 insertBefore() 将节点添加到父元素中。
示例：const newDiv = document.createElement(‘div’); newDiv.textContent = ‘我是新添加的元素’; document.body.appendChild(newDiv); // 添加到body末尾
如果想插入到某个元素前面：
const parent = document.getElementById(‘parent’); const existingChild = document.getElementById(‘child’); parent.insertBefore(newDiv, existingChild);
删除DOM节点
删除节点需要获取该节点及其父节点，然后调用 removeChild() 方法。
也可以直接对节点调用 remove() 方法，更简洁。
方法一：使用 removeChild()const element = document.getElementById(‘myElement’); element.parentNode.removeChild(element);方法二：使用 remove()（推荐）const element = document.getElementById(‘myElement’); element.remove(); // 简洁直观，无需父节点
注意事项
删除节点前确保节点存在，避免报错。可以先判断节点是否为null。
if (element) { element.remove(); }
动态添加的节点如果绑定了事件监听器，删除后监听器也会随之移除。
基本上就这些，掌握 createElement、appendChild、insertBefore 和 remove 就能应对大多数场景。
以上就是js中dom怎么添加、删除节点的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537710.html
微信扫一扫 
支付宝扫一扫 
