JavaScript可以添加、删除、替换节点。

• appendChild() - 创建新的HTML节点插入在父元素结尾（运行一下）
• insertBefore() - 创建新的HTML节点插入某元素前面（运行一下）
• removeChild() - 删除指定HTML节点（运行一下）
• replaceChild() - 替换指定HTML节点（运行一下）

---

appendChild() - 创建新的HTML节点插入在父元素结尾

如下所示，使用appendChild()方法创建一个元素节点，再通过appendChild()方法把该节点作为子元素，插入到指定父元素的结尾。（新插入的元素包含在父元素内）

<div id="div1">
<p id="p1">地振高冈，一派西山千古秀</p>
<p id="p2">门朝大海，三合河水万年流</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("【这是新插入的一段文本】");
para.appendChild(node);

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

运行一下

insertBefore() - 创建新的HTML节点插入某元素前面

如下所示，使用appendChild()方法创建一个元素节点，再通过insertBefore()方法把该节点插入在某元素前面。

<div id="div1">
<p id="p1">地振高冈，一派西山千古秀</p>
<p id="p2">门朝大海，三合河水万年流</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("【这是新插入的一段文本】");
para.appendChild(node);

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

运行一下

removeChild() - 删除指定HTML节点

通过removeChild()方法可以删除父元素中的指定子元素节点。

<div id="div1">
<p id="p1">地振高冈，一派西山千古秀</p>
<p id="p2">门朝大海，三合河水万年流</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child); // 删除div1元素的子元素节点p1
</script>

运行一下

replaceChild() - 替换指定HTML节点

通过replaceChild()方法可以使用新建节点来替换父元素中指定子元素。

<div id="div1">
<p id="p1">地振高冈，一派西山千古秀</p>
<p id="p2">门朝大海，三合河水万年流</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("【这是新插入的一段文本】");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p2");
element.replaceChild(para, child); // 用新节点替换id为p2的元素
</script>

运行一下