快捷導(dǎo)航

初學(xué)js插入節(jié)點(diǎn)appendChild insertBefore使用方法

更新時(shí)間：2011年07月04日 23:24:21 作者：

由于可見insertBefore()方法的特性是在已有的子節(jié)點(diǎn)前面插入新的節(jié)點(diǎn)但是兩種情況結(jié)合起來發(fā)現(xiàn)insertBefore()方法插入節(jié)點(diǎn)，是可以在子節(jié)點(diǎn)列表的任意位置。

首先從定義來理解這兩個(gè)方法：
appendChild() 方法：可向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)。語法：appendChild(newchild)
insertBefore() 方法：可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。語法：insertBefore(newchild,refchild)
相同之處：插入子節(jié)點(diǎn)
不同之處：實(shí)現(xiàn)原理方法不同。
　　　　　appendChild方法是在父級(jí)節(jié)點(diǎn)中的子節(jié)點(diǎn)的末尾添加新的節(jié)點(diǎn)（相對(duì)于父級(jí)節(jié)點(diǎn) 來說）。
　　　　 insertBefore 方法是在已有的節(jié)點(diǎn)前添加新的節(jié)點(diǎn)（相對(duì)于子節(jié)點(diǎn)來說的）。
來看個(gè)這個(gè)簡(jiǎn)單的實(shí)例：在id為box-con 的末尾添加一個(gè)子節(jié)點(diǎn)div

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

 
<div class="btns"><input type="button" value="插入元素" id="creatbtn"/></div> 
<div id="box-one"> 
<p class="con2" id="p1">1</p> 
<p class="con2" >2</p> 
<p class="con2" >3</p> 
</div> 

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

 
window.onload = function () { 
var btn = document.getElementById("creatbtn"); 
btn.onclick = function() { 
insertEle(); 
} 
} 
function insertEle() { 
var oTest = document.getElementById("box-one"); 
var newNode = document.createElement("div"); 
newNode.innerHTML = " This is a newcon "; 
//oTest.appendChild(newNode); 
oTeset.insertBefore(newNode,null); // 這兩種方法均可實(shí)現(xiàn) 
} 

這個(gè)insertBefore 的第一個(gè)參數(shù) 和appendChild的一樣，都是那個(gè)新的節(jié)點(diǎn)變量，而insert第二個(gè)參數(shù)不僅可以為null 。也可以這樣寫呢

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

 
function insertEle() { 
var oTest = document.getElementById("box-one"); 
var newNode = document.createElement("div"); 
var reforeNode = document.getElementById("p1"); 
newNode.innerHTML = " This is a newcon "; 
oTest.insertBefore(newNode,reforeNode); // 新建的元素節(jié)點(diǎn)插入到 id為p1的元素前面 
} 

或者

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

 
function insertEle() { 
var oTest = document.getElementById("box-one"); 
var newNode = document.createElement("div"); 
var reforeNode = document.getElementById("p1"); 
newNode.innerHTML = " This is a newcon "; 
oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素節(jié)點(diǎn)插入到 id為p1后面節(jié)點(diǎn)元素的 前面， 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　也就是說 插入id為P1節(jié)點(diǎn)元素的后面。 
} 

這里想說的是 nextSibling :某個(gè)元素之后緊跟的元素（處于同一樹層級(jí)中）。

reforeNode.nextSibling ：取得的是reforeNode對(duì)象的緊跟著的下一個(gè)節(jié)點(diǎn)。

previousSibling - 取得某節(jié)點(diǎn)的上一個(gè)同級(jí)節(jié)點(diǎn)

由于可見insertBefore()方法的特性是在已有的子節(jié)點(diǎn)前面插入新的節(jié)點(diǎn)但是兩種情況結(jié)合起來發(fā)現(xiàn)insertBefore()方法插入節(jié)點(diǎn)，是可以在子節(jié)點(diǎn)列表的任意位置。

呵呵呵。。。有些方法不只是作用于定義的那些特性，只要符合語法，結(jié)合一些屬性總會(huì)有意想不到的收獲。

作為初學(xué)者，我懂的不多，或許我的理解還很淺薄，有些可能理解錯(cuò)了，希望看到的能夠給我提點(diǎn)下，我不求別的，我只希望在這里記錄點(diǎn)點(diǎn)滴滴和吸取大家的建議來促進(jìn)我的成長(zhǎng)。。。

您可能感興趣的文章: