js中添加删除替换插入节点所用的方法

最新推荐文章于 2024-06-09 00:30:00 发布

Good luck—dys

最新推荐文章于 2024-06-09 00:30:00 发布

阅读量518

点赞数 9

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/m0_74359467/article/details/134959922

版权

本文详细介绍了JavaScript中DOM操作的五个关键方法：appendChild()用于添加节点，insertBefore()用于在指定位置插入节点，removeChild()用于删除节点，replaceChild()用于替换节点。通过示例展示了如何使用这些方法操作HTML元素。

摘要由CSDN通过智能技术生成

添加节点：
- appendChild()：将一个节点添加为另一个节点的子节点。
- insertBefore()：在指定节点之前插入一个新节点。
删除节点：
- removeChild()：从父节点中移除指定的子节点。
替换节点：
- replaceChild()：将一个新节点替换为指定的旧节点。

// 创建一个新节点
var newElement = document.createElement("div");
newElement.innerHTML = "新节点";

// 获取父节点的引用
var parentElement = document.getElementById("parent-element");

// 添加节点
parentElement.appendChild(newElement);

// 删除节点
var childElement = document.getElementById("child-element");
parentElement.removeChild(childElement);

// 替换节点
var oldElement = document.getElementById("old-element");
parentElement.replaceChild(newElement, oldElement);

// 在指定节点之前插入节点
var referenceElement = document.getElementById("reference-element");
parentElement.insertBefore(newElement, referenceElement);

需要注意的是，上述代码中的getElementById()、createElement()等方法仅为示例，你需要根据实际情况来获取或创建相应的节点。