JavaScript HTML DOM 元素 (節點)

本章節介紹如何向文檔中添加和移除元素(節點)。

建立新的 HTML 元素 (節點) - appendChild()

要建立新的 HTML 元素 (節點)須要先建立一個元素，而後在已存在的元素中添加它。

<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>

如下代碼是用於建立<p>元素：

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

爲<p>元素添加文本節點:

var  node=document.createTextNode(「這是一個段落。」);

將文本節點添加到<p>元素中：

para.appendChild(node);

最後，在一個已存在的元素中添加p元素

查找已存在的元素：

var  element = document.getElementById("div1");

添加到已存在的元素中：

element.appendChild(para);

建立新的HTML元素(節點)-insertBefore（）

以上實例咱們使用了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>

移除已存在的元素

要移除一個元素，你須要知道該元素的父元素。

<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);
</script>

注意：早期的Internet Explorer瀏覽器不支持node.remove()方法。

HTML文檔中<div>元素包含兩個子節點（兩個<p>元素）：

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>

查找id="div1"的元素：

var parent = document.getElementById("div1");

查找 id="p1" 的 <p> 元素:

var child = document.getElementById("p1");

從父元素中移除子節點：

parent.removeChild(child);

若是可以在不引用父元素的狀況下刪除某個元素，就太好了。
不過很遺憾。DOM 須要清楚您須要刪除的元素，以及它的父元素。

如下代碼是已知要查找的子元素，而後查找其父元素，再刪除這個子元素（刪除節點必須知道父節點）：

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

替換 HTML 元素 - replaceChild()

咱們能夠使用replaceChild（）方法來替換HTML DOM中的元素。

<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 parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>