js AppendChild與insertBefore用法詳細對比
我們知道appendChild和insertBefore都有插入節(jié)點的功能。但在應(yīng)用上,這兩者之間還是有一些區(qū)別的。
比如我們要在下面這個div中插入一個子節(jié)點P時:
<div id="test"><p id="x1">Node</p><p>Node</p></div>
我們可以這樣寫(測試某種情況時請將另外一種注釋):
<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ù)可以設(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é)點的。兩種情況結(jié)合起來,發(fā)現(xiàn)insertBefore()方法插入節(jié)點,是可以在子節(jié)點列表的任意位置。
從這幾個例子中得出:
appendChild() 方法在節(jié)點的子節(jié)點列表末添加新的子節(jié)點。
insertBefore() 方法在節(jié)點的子節(jié)點列表任意位置插入新的節(jié)點。
- 初學(xué)js插入節(jié)點appendChild insertBefore使用方法
- javascript實現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)
- JavaScript之a(chǎn)ppendChild、insertBefore和insertAfter使用說明
- js中AppendChild與insertBefore的用法詳細解析
- 走馬燈效果代碼js appendChild實現(xiàn)的無縫滾動
- js原生appendChild的bug解決心得分享
- javascript appendChild,innerHTML,join性能比較代碼
- javascript使用appendChild追加節(jié)點實例
- js利用appendChild對<li>標簽進行排序的實現(xiàn)方法
- JS中appendChild追加子節(jié)點無效的解決方法
相關(guān)文章
JavaScript實現(xiàn)計數(shù)器基礎(chǔ)方法
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)計數(shù)器的基礎(chǔ)方法2017-10-10
,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下js實現(xiàn)網(wǎng)頁多級級聯(lián)菜單代碼
這篇文章主要介紹了js實現(xiàn)網(wǎng)頁多級級聯(lián)菜單代碼,涉及javascript基于數(shù)組動態(tài)構(gòu)造多級級聯(lián)菜單的技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08詳談ES6中的迭代器(Iterator)和生成器(Generator)
下面小編就為大家?guī)硪黄斦凟S6中的迭代器(Iterator)和生成器(Generator)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07javascript實現(xiàn)保留兩位小數(shù)的多種方法
這篇文章主要介紹了javascript實現(xiàn)保留兩位小數(shù)的多種方法,如果數(shù)字的原本小數(shù)位數(shù)不到兩位,那么缺少的就自動補零,感興趣的小伙伴們可以參考一下2015-12-12javascript中undefined與null的區(qū)別
在JavaScript中存在這樣兩種原始類型:Null與Undefined。這兩種類型常常會使JavaScript的開發(fā)人員產(chǎn)生疑惑,在什么時候是Null,什么時候又是Undefined?2015-08-08