js中AppendChild與insertBefore的用法詳細解析_javascript技巧

appendChild定義
appendChild(newChild: Node) : Node
Appends a node to the childNodes array for the node.
Supported: IE 5.0 , Moy for the node.
Supported: IE 5.0 , Mozilla Net. 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);

insertBefored

insertBefore() 方法的作用是：在現有的子節點前插入一個新的子節點

insertBefore用法
target.insertBefore(newChild,existing🎜>

target.insertBefore(newChild,existing🎜>

target.insertBefore(newChild,existing🎜>

target.insertBefore(newChild,existing🎜>

target.insertBefore(newChild,existing) 🎜>

newChild作為target的子節點插入到existingChild節點之前

existingChild為可選項參數，當為null時其效果與appendChild一樣

insertBefore範例

var oTest = document.getElementById("test");

var newNode = document.createElement("p");
newNode.innerHT = "p");
newNode.innerHT = "ThisThis is a test";

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

 
好了那麼有insertBefore的應該也有insertAfter吧？ 好那我們來用Aptana寫一個例子吧，但Aptana的智能提示告訴我其實沒有insertAfter這個方法
那麼就自己定義一個羅:)

insertAfter

function insertAfter(newEl, targetEl)
{
      var parentEl = targetEl.parentNode;

           parentEl.appendChild (newEl);
      }else
      {
               
}

 
insertAfter用法與範例
var txtName = document.getElementById("txtName");
var htmlSpan = document.createElement("span");
htmlSpan.innerHTML = "This is a test";

htmlSpan.innerHTML = "This is a test";

htmlSpan.innerHTML = "This is a test";
htmlSpan.innerHTML = "This is a test";
insertAfter(htmlSpan,txtName); 將htmlSpan 當作txtName 的兄弟節點插入txtName 節點之後

總結：

1、appendChild和insertBefore是做對節點的方法來使用的，而insertAfter只是自訂的一個函數

2、insertBefore相對於appendChild來說，比較靈活可以將新的節點插入目標節點子節點陣列中的任一位置。 3、使用appendChild和insertBefore來插入新的節點前提是，其兄弟節點必須有共同的父節點