js AppendChild與insertBefore用法詳細對比

更新時間：2013年12月16日 09:41:25 作者：

本篇文章主要是對js中AppendChild與insertBefore的用法進行了詳細的對比。需要的朋友可以過來參考下，希望對大家有所幫助

我們知道appendChild和insertBefore都有插入節(jié)點的功能。但在應用上，這兩者之間還是有一些區(qū)別的。

比如我們要在下面這個div中插入一個子節(jié)點P時：

我們可以這樣寫(測試某種情況時請將另外一種注釋)：

<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
//測試從這里開始 
//appendChild方法： 
oTest.appendChild(newNode); 
//insertBefore方法： 
oTest.insertBefore(newNode,null); 
</script>

通過以上的代碼，可以測試到一個新的節(jié)點被創(chuàng)建到了節(jié)點div下，且該節(jié)點是div最后一個節(jié)點。(如要查看DOM，IE可以通過IE Developer Toolbar插件來查看，F(xiàn)irefox可以使用Firebug)

很明顯，通過這個例子，可以知道appendChildhild和insertBefore都可以進行插入節(jié)點的操作。

在上面的例子中有這樣一句代碼：oTest.insertBefore(newNode,null) ，這里insertBefore有2個參數(shù)可以設置，第一個是和appendChild相同的，第二卻是它特有的。它不僅可以為null，還可以為：

復制代碼代碼如下:

<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var refChild = document.getElementById("x1"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode,refChild); 
</script>

這個例子將在x1節(jié)點前面插入一個新的節(jié)點

又或：

復制代碼代碼如下:

<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var refChild = document.getElementById("x1"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode,refChild.nextSibling); 
</script>

這個例子將在x1節(jié)點的下一個節(jié)點前面插入一個新的節(jié)點

還可為：

復制代碼代碼如下:

<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode,oTest.childNodes[0]);  
</script>

這個例子將在第一子節(jié)點前面插入一個新的節(jié)點，也可以通過改變childNodes[0,1,...]來在其它位置插入新的節(jié)點

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

從這幾個例子中得出：
appendChild() 方法在節(jié)點的子節(jié)點列表末添加新的子節(jié)點。
insertBefore() 方法在節(jié)點的子節(jié)點列表任意位置插入新的節(jié)點。

您可能感興趣的文章:

three.js 實現(xiàn)露珠滴落動畫效果的示例代碼
這篇文章主要介紹了three.js 實現(xiàn)露珠滴落動畫效果的示例代碼,非常不錯，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-03-03
JS如何使用正則表達式(match)截取括號中的文字和數(shù)字
正則表達式是一種用來匹配文本模式的工具,這篇文章主要給大家介紹了關于JS如何使用正則表達式(match)截取括號中文字和數(shù)字的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-10-10
微信小程序動態(tài)綁定數(shù)據(jù)及動態(tài)事件處理
這篇文章主要介紹了微信小程序動態(tài)綁定數(shù)據(jù)及動態(tài)事件處理的相關資料,需要的朋友可以參考下
2017-03-03
ES6 Symbol在對象中的作用實例分析
這篇文章主要介紹了ES6 Symbol在對象中的作用,結合實例形式分析了ES6 Symbol在對象中聲明、使用方法與相關注意事項,需要的朋友可以參考下
2020-06-06
淺析JavaScript Array和string的轉換(推薦)
下面小編就為大家?guī)硪黄獪\析JavaScript Array和string的轉換(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
利用函數(shù)的惰性載入提高javascript代碼執(zhí)行效率
在 addEvent 函數(shù)每次調(diào)用的時候都要走一遍，如果瀏覽器支持其中的一種方法，那么他就會一直支持了，就沒有必要再進行其他分支的檢測了
2014-05-05
淺析JavaScript中五種模塊系統(tǒng)的使用
模塊系統(tǒng)是什么？簡單來說，其實就是我們在一個文件里寫代碼，聲明一些可以導出的字段，然后另一個文件可以將其導入并使用。今天我們來聊聊?JavaScript?的模塊系統(tǒng)，感興趣的可以了解一下
2022-11-11
12行javascript代碼繪制一個八卦圖
本文給大家分享的是使用有限的代碼繪制八卦圖，算是考核下自己對于javascript的理解，這里推薦給大家，有需要的小伙伴參考下。
2015-04-04
基于代數(shù)方程庫Algebra.js解二元一次方程功能示例
這篇文章主要介紹了基于代數(shù)方程庫Algebra.js解二元一次方程功能,結合具體實例形式分析了方程庫Algebra.js計算方程的具體使用技巧,需要的朋友可以參考下
2017-06-06
云開發(fā)進階uniCloud-db組件與JQL語法的轉換詳解
這篇文章主要為大家介紹了云開發(fā)進階uniCloud-db組件與JQL語法的轉換詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03