JavaScript 添加 删除 替换 插入到某个接点的方法？

JavaScript 中，可以使用以下方法来操作 DOM 节点：

1. 添加节点：可以使用 appendChild()、insertBefore()、replaceChild() 方法来添加节点。

• appendChild(newChild)：在父节点的最后一个子节点后面添加新的子节点。
• insertBefore(newChild, refChild)：在参考子节点的前面插入新的子节点。
• replaceChild(newChild, oldChild)：用新的子节点替换旧的子节点。

1. 删除节点：可以使用 removeChild() 方法来删除节点。

• removeChild(oldChild)：删除指定的子节点。

1. 替换节点：可以使用 replaceChild() 方法来替换节点。

• replaceChild(newChild, oldChild)：用新的子节点替换旧的子节点。

1. 插入节点：可以使用 innerHTML、insertAdjacentHTML() 方法来插入节点。

• innerHTML：用于设置或获取HTML内容，可以一次性插入多个节点。
• insertAdjacentHTML(position, text)：在当前元素的指定位置插入HTML内容，支持的位置包括 beforebegin、afterbegin、beforeend、afterend。

以下是一个示例代码，演示了如何使用这些方法来操作 DOM 节点：

// 创建新的节点
const newDiv = document.createElement('div');
newDiv.textContent = '新节点';

// 获取父节点
const parentNode = document.getElementById('parent');

// 添加节点
parentNode.appendChild(newDiv);

// 插入节点
parentNode.insertAdjacentHTML('beforeend', '<p>插入节点</p>');

// 删除节点
const oldDiv = document.querySelector('#parent div:first-child');
parentNode.removeChild(oldDiv);

// 替换节点
const newP = document.createElement('p');
newP.textContent = '替换节点';
const oldP = document.querySelector('#parent p:last-child');
parentNode.replaceChild(newP, oldP);

在这个示例中，我们首先创建了一个新的 div 节点，并为其添加了一些文本内容。然后，我们获取了父节点，并使用 appendChild() 方法来添加新的节点。接下来，我们使用 insertAdjacentHTML() 方法在父节点的最后插入一个 p 节点。接着，我们使用 querySelector() 方法获取父节点中的第一个 div 节点，并使用 removeChild() 方法删除该节点。最后，我们创建了一个新的 p 节点，并使用 replaceChild() 方法将其替换父节点中的最后一个 p 节点。