js操作DOM–添加、删除节点的简单实例

以下是关于"js操作DOM--添加、删除节点的简单实例"的完整攻略：

一、添加节点

在HTML页面中添加节点有四个主要方法：

1.1 appendChild()

appendChild() 方法可以在父节点的末尾添加一个子节点。示例代码如下：

// 创建新节点
var newP = document.createElement("p");
var textNode = document.createTextNode("hello world");
newP.appendChild(textNode);

// 找到父节点，将新建的节点添加到父节点的末尾
var parentNode = document.getElementById("parent");
parentNode.appendChild(newP);

在上述例子中，首先我们创建了一个新的 <p> 节点，并使用 createTextNode() 方法创建了一个文本节点，并把文本节点添加到 <p> 节点中。接着，使用 getElementById() 找到父节点，使用 appendChild() 方法将新的节点添加到父节点的末尾。

1.2 insertBefore()

insertBefore() 方法允许我们在父节点的指定位置插入一个新的节点。示例代码如下：

// 创建新节点
var newP = document.createElement("p");
var textNode = document.createTextNode("hello world");
newP.appendChild(textNode);

// 找到父节点，获取子节点
var parentNode = document.getElementById("parent");
var firstChild = parentNode.firstChild;

// 在父节点的第一个子节点前插入新建的节点
parentNode.insertBefore(newP, firstChild);

在上述例子中，我们通过调用 createElement() 和 createTextNode() 方法，创建了一个新的 <p> 节点，并把文本节点添加到 <p> 节点中。然后使用 getElementById() 方法找到父节点，并获取了它的第一个子节点。使用 insertBefore() 方法，将新的节点插入到第一个子节点前面。

二、删除节点

在 HTML 页面中删除节点有两个方法：

2.1 removeChild()

removeChild() 方法可以删除页面上的指定节点。示例代码如下：

// 找到要删除的节点
var nodeToRemove = document.getElementById("removeMe");

// 找到父节点，并调用 removeChild() 方法
var parentNode = nodeToRemove.parentNode;
parentNode.removeChild(nodeToRemove);

在上述例子中，我们使用 getElementById() 方法找到了要删除的节点，并使用 parentNode 属性找到它的父节点。然后调用 removeChild() 方法，将该节点从父节点中删除。

2.2 replaceChild()

replaceChild() 方法可以用一个新的节点替换页面上的指定节点。示例代码如下：

// 创建新节点
var newP = document.createElement("p");
var textNode = document.createTextNode("bye bye");
newP.appendChild(textNode);

// 找到要被替换的节点
var nodeToReplace = document.getElementById("replaceMe");

// 找到父节点，并调用 replaceChild() 方法
var parentNode = nodeToReplace.parentNode;
parentNode.replaceChild(newP, nodeToReplace);

在上述例子中，我们使用 createElement() 和 createTextNode() 方法，创建了一个新的 <p> 节点，并把文本节点添加到 <p> 节点中。使用 getElementById() 方法找到要被替换的节点，并使用 parentNode 属性找到它的父节点。然后调用 replaceChild() 方法，用新的节点替换原有的节点。

以上就是关于 "js操作DOM--添加、删除节点的简单实例" 的完整攻略。