[JavaScript] About DOM Nodes

The HTML DOM Tree of Objects

DOM節點樹如上圖，這中間如要取值、新增、刪除皆有Method可用，O'Reilly深入簡出JavaScript書內提到的Method有：

• nodeValue()
• nodeType()
• childNodes()
• firstChild()
• lastChild()
• removeChild()
• createTextNode()
• appendChild() 

查詢appendChild()相關用法時發現，還有insertBefore()，下面將一一介紹。

---

appendChild()定義：

appendChild(newChild: Node) : Node
Appends a node to the childNodes array for the node.
Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+
將節點新增至指定的節點內

appendChild()用法：

target.appendChild(newChild)
建立的子節點(newChild)，新增至target節點內

appendChild()範例：

var newElement = document.Document.createElement('label'); 
newElement.Element.setAttribute('value', 'Username:');
var usernameText = document.Document.getElementById('username'); 

usernameText.appendChild(newElement); 

insertBefore()定義：

The insertBefore() method inserts a new child node before an existing child node.
此method插入新的子節點至指定節點之前

insertBefore()用法：

target.insertBefore(newChild,existingChild)
插入newChild於target節點內的existingChild子節點之前
existingChild為選擇性參數，其值為null時功能與appendChild相同

insertBefore()範例：

var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";

oTest.insertBefore(newNode,oTest.childNodes[0]);  

To Be Continue ...