DOM 节点操作

利用 DOM API 可以方便的添加和删除节点。

创建新的 HTML 元素（节点）

要将新元素添加到 HTML DOM，您必须首先创建元素（元素节点），然后将其附加到现有元素。

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
  const para = document.createElement("p");
  const node = document.createTextNode("This is new.");
  para.appendChild(node);

  const element = document.getElementById("div1");
  element.appendChild(para);
</script>

说明：

此代码创建一个新 <p> 元素：

const para = document.createElement("p");

要向 <p> 元素添加文本，您必须先创建一个文本节点。此代码创建一个文本节点：
```
const node = document.createTextNode("This is a new paragraph.");
```
然后您必须将文本节点附加到 <p> 元素：
```
para.appendChild(node);
```
最后，您必须将新元素附加到现有元素。

先查找现有元素：
```
const element = document.getElementById("div1");
```
再添加孩子节点：
```
element.appendChild(para);
```

insertBefore()

上面示例中的 appendChild() 方法将新元素附加为父元素的最后一个子元素。而 insertBefore() 方法可以将新元素节点插入到某个节点的前面。

使用 insertBefore() 插入节点：

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
  const para = document.createElement("p");
  const node = document.createTextNode("This is new.");
  para.appendChild(node);

  const element = document.getElementById("div1");
  const child = document.getElementById("p1");
  element.insertBefore(para, child);
</script>

删除现有的 HTML 元素

remove() 方法可以删除指定的元素，使用方法： element.remove() 。

使用 remove() 方法删除 HTML 元素：

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
  const elmnt = document.getElementById("p1");
  elmnt.remove();
</script>

remove() 方法在旧浏览器中不起作用，请参阅下面的示例了解如何使用 removeChild()。

删除子节点

removeChild() 方法用于父节点删除一个指定的子节点。

对于不支持该 remove() 方法的浏览器，必须找到父节点使用 removeChild() 方法。

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
  const parent = document.getElementById("div1");
  const child = document.getElementById("p1");
  parent.removeChild(child);
</script>

还有一个常见的解决方法：找到要删除的子项，并使用其 parentNode 属性定位父节点，在父节点上指定 removeChild() 方法。

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

替换 HTML 元素

replaceChild() 方法可以用指定的节点替换某个子节点， replaceChild() 方法接受 2 个参数：

第 1 个参数新的元素节点
第 2 个参数是要被替换的子节点

要将元素替换为 HTML DOM，请使用以下 replaceChild() 方法：

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
  const para = document.createElement("p");
  const node = document.createTextNode("This is new.");
  para.appendChild(node);

  const parent = document.getElementById("div1");
  const child = document.getElementById("p1");
  parent.replaceChild(para, child);
</script>