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

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

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

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

復制代碼代碼如下:

 
<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> 

復制代碼代碼如下:

 
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); // 這兩種方法均可實現(xiàn) 
} 

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

復制代碼代碼如下:

 
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é)點插入到 id為p1的元素前面 
} 

或者

復制代碼代碼如下:

 
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é)點插入到 id為p1后面節(jié)點元素的 前面， 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　也就是說 插入id為P1節(jié)點元素的后面。 
} 

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

reforeNode.nextSibling ：取得的是reforeNode對象的緊跟著的下一個節(jié)點。

previousSibling - 取得某節(jié)點的上一個同級節(jié)點

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

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

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

您可能感興趣的文章: