JavaScript第十二讲：DOM编程“创建，删除，替换，插入节点”-CSDN博客

本文链接：https://blog.csdn.net/2303_80856850/article/details/139922095

1. 创建节点

在HTML DOM中，我们通常使用JavaScript的document.createElement()方法来创建元素节点，使用document.createTextNode()方法来创建文本节点。

示例代码：

// 创建一个新的<p>元素节点  
var newElement = document.createElement("p");  
  
// 创建一个文本节点  
var textNode = document.createTextNode("这是一个新的段落。");  
  
// 将文本节点添加到<p>元素节点中  
newElement.appendChild(textNode);  
  
// 将<p>元素节点添加到文档的body中  
document.body.appendChild(newElement);

2. 删除节点

要从DOM中删除一个节点，我们可以使用removeChild()方法。这个方法需要一个参数，即要删除的节点。

示例代码：

// 假设我们有一个id为"myElement"的元素要删除  
var elementToRemove = document.getElementById("myElement");  
  
// 获取其父元素  
var parentElement = elementToRemove.parentNode;  
  
// 从父元素中删除该元素  
parentElement.removeChild(elementToRemove);

3. 替换节点

在DOM中，我们通常不直接“替换”一个节点，而是先删除要替换的节点，然后在同一位置插入新的节点。但为了方便，我们可以将这两个步骤封装在一个函数中。

示例代码：

function replaceNode(oldNode, newNode) {  
    var parent = oldNode.parentNode;  
    if (parent) {  
        parent.replaceChild(newNode, oldNode);  
    }  
}  
  
// 创建一个新的<p>元素节点和文本节点  
var newElement = document.createElement("p");  
var newTextNode = document.createTextNode("这是替换后的段落。");  
newElement.appendChild(newTextNode);  
  
// 假设我们有一个id为"myElement"的元素要替换  
var oldElement = document.getElementById("myElement");  
  
// 调用函数替换节点  
replaceNode(oldElement, newElement);

4. 插入节点

在DOM中，插入节点通常涉及以下几个方法：

appendChild(): 将节点添加到父节点的子节点列表的末尾。
insertBefore(): 将节点插入到参考节点之前。

示例代码：

使用`appendChild()`

// 创建一个新的<p>元素节点和文本节点  
var newElement = document.createElement("p");  
var newTextNode = document.createTextNode("这是通过appendChild()添加的段落。");  
newElement.appendChild(newTextNode);  
  
// 将新元素添加到文档的body末尾  
document.body.appendChild(newElement);

使用`insertBefore()`

// 假设我们有一个id为"referenceElement"的参考元素  
var referenceElement = document.getElementById("referenceElement");  
  
// 创建一个新的<p>元素节点和文本节点  
var newElement = document.createElement("p");  
var newTextNode = document.createTextNode("这是通过insertBefore()添加的段落，位于参考元素之前。");  
newElement.appendChild(newTextNode);  
  
// 将新元素插入到参考元素之前  
referenceElement.parentNode.insertBefore(newElement, referenceElement);