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

在 JavaScript 中，我们可以使用以下方法来添加、删除、替换和插入节点：

1. 添加节点：

  - `appendChild()`: 将一个节点作为另一个节点的子节点添加到指定父节点的末尾。

  - `insertBefore()`: 在指定父节点的特定子节点之前插入一个新的子节点。

2. 删除节点：

  - `removeChild()`: 从其父节点中移除指定的子节点。

3. 替换节点：

  - `replaceChild()`: 将一个节点替换为另一个节点。

下面是这些方法的详细说明和示例：

1. 添加节点：

  - `appendChild()` 方法用于将一个节点作为另一个节点的子节点添加到指定父节点的末尾。例如：

var parent = document.getElementById('parent');
var child = document.createElement('div');
parent.appendChild(child);

    这将在具有 id 为 "parent" 的元素内添加一个新的 `<div>` 子节点。

  - `insertBefore()` 方法用于在指定父节点的特定子节点之前插入一个新的子节点。例如：

var parent = document.getElementById('parent');
var newChild = document.createElement('div');
var referenceNode = document.getElementById('referenceNode');
parent.insertBefore(newChild, referenceNode);

    这将在具有 id 为 "parent" 的元素内，在具有 id 为 "referenceNode" 的子节点之前插入一个新的 `<div>` 子节点。

2. 删除节点：

  - `removeChild()` 方法用于从其父节点中移除指定的子节点。例如：

var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.removeChild(child);

    这将从具有 id 为 "parent" 的元素内移除具有 id 为 "child" 的子节点。

3. 替换节点：

  - `replaceChild()` 方法用于将一个节点替换为另一个节点。例如：

var parent = document.getElementById('parent');
var newChild = document.createElement('div');
var oldChild = document.getElementById('oldChild');
parent.replaceChild(newChild, oldChild);

    这将在具有 id 为 "parent" 的元素内，将具有 id 为 "oldChild" 的子节点替换为新创建的 `<div>` 子节点。

以上是 JavaScript 中用于添加、删除、替换和插入节点的常用方法。根据具体的需求和场景，你可以选择适合的方法来操作 DOM 节点。