這篇文章主要是對js中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. 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來插入新的節點前提是，其兄弟節點必須有共同的父節點