DOM提供了insertBefore()方法，可以在某一個節點前面插入節點，但有時候需要在某一個節點后面插入節點，這就是insertAfter()方法。（From：JavaScript DOM編程藝術）
函數名：insertAfter()
參數：newElement：要添加的節點，targetElement：目標節點
1 function insertAfter(newElement,targetElement) { 2 var parent = targetElement.parentNode;//獲取目標節點的父級標簽 3 if(parent.lastChild == targetElement) {//如果目標節點正好是最后一個節點，使用appendChild插入 4 parent.appendChild(newElement); 5 } else { 6 parent.insertBefore(newElement,targetElement.nextSibling);//一般情況下要取得目標節點的下一個節點，再使用insertBefore()方法。 7 } 8 }
無論是insertBefore()還是insertAfter(),都是針對DOM節點樹而言的，所有最基本的這倆個函數對元素節點和文本節點都有效。
測試一：DOM節點樹中是否包含屬性節點。
<html> <head> </head> <body> <div id="parentNode"> <h1 id="childElementNode01">this is childNode01</h1> <h1 id="childElementNode02">this is childNode02</h1> <h1 id="childElementNode03">this is childNode03</h1> </div> <script> var targetElement = document.getElementById("childElementNode02"); var parentElement = targetElement.parentNode; //alert(parentElement.nodeName);//DIV //alert(parentElement.nodeType);//1 //alert(parentElement.childNodes.length);//7,有7個childNode /*第一個子節點*/ //alert(parentElement.childNodes[0].nodeName);//#text //alert(parentElement.childNodes[0].nodeType);//3,文本節點 //alert(parentElement.childNodes[0].nodeValue);//空值 /*第二個子節點*/ //alert(parentElement.childNodes[1].nodeName);//H1 //alert(parentElement.childNodes[1].nodeType);//1，元素節點 //alert(parentElement.childNodes[1].nodeValue);//null /*第三個子節點*/ //alert(parentElement.childNodes[2].nodeName);//#text //alert(parentElement.childNodes[2].nodeType);//3，文本節點 //alert(parentElement.childNodes[2].nodeValue);//空值 /*第四個子節點*/ //alert(parentElement.childNodes[3].nodeName);//H1 //alert(parentElement.childNodes[3].nodeType);//1，元素節點 //alert(parentElement.childNodes[3].nodeValue);//null </script> </body> </html>
可以看到，文本節點和元素節點是同胞關系，這里測試用的是firefox，它把TAB和換行都當成了文本節點，所以才會出現7個子節點。
需要注意的是屬性節點並不包含在7個子節點中，也就是說，屬性節點並不包含在DOM節點樹中。
事實上，屬性節點代表了元素中的屬性。在DOM API中，屬性節點是通過org.w3c.dom.Attr接口來表示的。因為屬性實際上是附屬於元素的，所以屬性節點不能看做元素節點的子節點，
因而在DOM中，屬性沒有被認為是DOM節點樹中的一部分，在屬性節點上調用getparentNode()、getPreviousSilbling()和getNextSilbling()方法返回的都是null。
也就是說，元素節點被看成包含它的元素節點的一部分，並不是單獨的作為節點存在於DOM節點樹中，屬性節點並不是“節點”。
測試二：insertBefore()方法是否是作用於整個DOM節點樹的。
<html> <head> </head> <body> <div id="parentDivNode"> <h1 id="childElementNode01">this is childElementNode01</h1> <h1 id="childElementNode02">this is childElementNode02</h1> <h1 id="childElementNode03">this is childElementNode03</h1> </div> <script> var parentDivNode = document.getElementById("parentDivNode"); var childNode03 = parentDivNode.childNodes[2];//文本節點 var childNode04 = parentDivNode.childNodes[3];//元素節點 /*新建文本節點*/ var newTextNode = document.createTextNode("newTextNode"); /*新建元素節點*/ var elementNode = document.createElement("h1"); var elementNode_textNode = document.createTextNode("elementNode"); elementNode.appendChild(elementNode_textNode); //分4中情況插入DOM 節點樹中，insertBefore的2個參數 //1、文本節點，文本節點 //parentDivNode.insertBefore(newTextNode,childNode03); //alert(parentDivNode.childNodes.length);//8 //2、文本節點，元素節點 //parentDivNode.insertBefore(newTextNode,childNode04); //alert(parentDivNode.childNodes.length);//8 //3、元素節點，文本節點 //arentDivNode.insertBefore(elementNode,childNode03); //lert(parentDivNode.childNodes.length);//8 //4、元素節點，元素節點 parentDivNode.insertBefore(elementNode,childNode04); alert(parentDivNode.childNodes.length);//8 </script> </body> </html>
結論：insertBefore()方法是作用於整個節點樹的
測試三：insertAfter()方法是否是作用於整個DOM節點樹的。
<html> <head> <script> function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode;//獲取目標元素的父級標簽 if(parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); } } </script> </head> <body> <div id="parentDivNode"> <h1 id="childElementNode01">this is childElementNode01</h1> <h1 id="childElementNode02">this is childElementNode02</h1> <h1 id="childElementNode03">this is childElementNode03</h1> </div> <script> var parentDivNode = document.getElementById("parentDivNode"); var childNode03 = parentDivNode.childNodes[2];//文本節點 var childNode04 = parentDivNode.childNodes[3];//元素節點 /*新建文本節點*/ var newTextNode = document.createTextNode("newTextNode"); /*新建元素節點*/ var elementNode = document.createElement("h1"); var elementNode_textNode = document.createTextNode("elementNode"); elementNode.appendChild(elementNode_textNode); //分4中情況插入DOM 節點樹中，insertAfter的2個參數 //1、文本節點，文本節點 //insertAfter(newTextNode,childNode03); //alert(parentDivNode.childNodes.length);//8 //2、文本節點，元素節點 //insertAfter(newTextNode,childNode04); //alert(parentDivNode.childNodes.length);//8 //3、元素節點，文本節點 //insertAfter(elementNode,childNode03); //alert(parentDivNode.childNodes.length);//8 //4、元素節點，元素節點 //insertAfter(elementNode,childNode04); //alert(parentDivNode.childNodes.length);//8 </script> </body> </html>
結論：insertAfter()方法是作用於整個節點樹的，DOM樹中的節點都是繼承自Node類型。