快捷導(dǎo)航

JavaScript之a(chǎn)ppendChild、insertBefore和insertAfter使用說明

更新時(shí)間：2010年12月30日 22:23:30 作者：

這幾天需要用到對HTML節(jié)點(diǎn)元素的刪/插操作，由于用到insertBefore方法的時(shí)候遇到了一些麻煩，現(xiàn)在作為知識的整理，分別對appendChild、insertBefore和insertAfter做個(gè)總結(jié)

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+
添加一個(gè)節(jié)點(diǎn)到指定的節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)組中，讀起來好象有點(diǎn)拗口，簡單地說就是將元素添加到指定的節(jié)點(diǎn)中
appendChild用法
target.appendChild(newChild)
newChild作為target的子節(jié)點(diǎn)插入最后的一子節(jié)點(diǎn)之后
appendChild例子

復(fù)制代碼代碼如下:

 
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() 方法的作用是：在現(xiàn)有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
insertBefore用法
target.insertBefore(newChild,existingChild)
newChild作為target的子節(jié)點(diǎn)插入到existingChild節(jié)點(diǎn)之前
existingChild為可選項(xiàng)參數(shù)，當(dāng)為null時(shí)其效果與appendChild一樣

insertBefore例子

復(fù)制代碼代碼如下:

 
var oTest = document.getElementById("test"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode,oTest.childNodes[0]); 

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

復(fù)制代碼代碼如下:

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

insertAfter用法與例子

復(fù)制代碼代碼如下:

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

將htmlSpan 作為txtName 的兄弟節(jié)點(diǎn)插入到txtName 節(jié)點(diǎn)之后

總結(jié)：
1、appendChild和insertBefore是做對節(jié)點(diǎn)的方法來使用的，而insertAfter只是自定義的一個(gè)函數(shù)
2、insertBefore相對于appendChild來說，比較靈活可以將新的節(jié)點(diǎn)插入到目標(biāo)節(jié)點(diǎn)子節(jié)點(diǎn)數(shù)組中的任一位置。
3、使用appendChild和insertBefore來插入新的節(jié)點(diǎn)前提是，其兄弟節(jié)點(diǎn)必須有共同的父節(jié)點(diǎn)

您可能感興趣的文章: