JavaScript HTML DOM 元素(節點)，javascriptdom

JavaScript HTML DOM 元素(節點)，javascriptdom
建立新的 HTML 元素

建立新的 HTML 元素如需向 HTML DOM 添加新元素，您必須首先建立該元素（元素節點），然後向一個已存在的元素追加該元素。

 

 執行個體

This is a paragraph.

This is another paragraph.

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

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

例子解析： 

這段代碼建立新的

元素：

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

如需向

元素添加文本，您必須首先建立文本節點。這段代碼建立了一個文本節點：

var node=document.createTextNode("This is a new paragraph.");

然後您必須向

元素追加這個文本節點：

para.appendChild(node);

最後您必須向一個已有的元素追加這個新元素。

這段代碼找到一個已有的元素：

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

以下代碼在已存在的元素後添加新元素：

element.appendChild(para);

刪除已有的 HTML 元素

這段代碼向這個已有的元素追加新元素：

執行個體

This is a paragraph.

This is another paragraph.

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

執行個體解析 

這個 HTML 文檔含有擁有兩個子節點（兩個

元素）的

元素：

 

This is a paragraph.

This is another paragraph.

找到 id="p1" 的元素：

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

找到 id="p1" 的

元素：

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

從父元素中刪除子項目：

parent.removeChild(child);

	如果能夠在不引用父元素的情況下刪除某個元素，就太好了。 不過很遺憾。DOM 需要清楚您需要刪除的元素，以及它的父元素。

這是常用的解決方案：找到您希望刪除的子項目，然後使用其 parentNode 屬性來找到父元素：

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