JavaScript之appendChild、insertBefore和insertAfter使用说明

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. 
insertBefore() 方法的作用是：在现有的子节点前插入一个新的子节点 
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]); 

好了那么有insertBefore的应该也有insertAfter吧？ 
好那我们来用Aptana编写一个例子吧，但Aptana的智能提示告诉我其实没有insertAfter这个方法 
那么就自己定义一个罗:) 
insertAfter定义 

复制代码代码如下:

function insertAfter(newEl, targetEl) 
{ 
var parentEl = targetEl.parentNode; 
if(parentEl.lastChild == targetEl) 
{ 
parentEl.appendChild(newEl); 
}else 
{ 
parentEl.insertBefore(newEl,targetEl.nextSibling); 
} 
} 

insertAfter用法与例子 

复制代码代码如下:

var txtName = document.getElementById("txtName"); 
var htmlSpan = document.createElement("span"); 
htmlSpan.innerHTML = "This is a test"; 
insertAfter(htmlSpan,txtName); 

将htmlSpan 作为txtName 的兄弟节点插入到txtName 节点之后 

总结： 
1、appendChild和insertBefore是做对节点的方法来使用的，而insertAfter只是自定义的一个函数 
2、insertBefore相对于appendChild来说，比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。 
3、使用appendChild和insertBefore来插入新的节点前提是，其兄弟节点必须有共同的父节点