JavaScript添加節(jié)點的方法

小編給大家分享一下JavaScript添加節(jié)點的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

JavaScript添加節(jié)點的方法：1、使用appendChild()，語法“父級節(jié)點.appendChild(要添加的節(jié)點)”；2、使用insertBefore()，語法“父級節(jié)點.insertBefore(要插入的節(jié)點,插入位置)”。

JS種添加節(jié)點一共有2種方法

1、appendChild()

把要添加的節(jié)點添加到指定父級里面的最后面，所以也叫追加

使用方式：父級節(jié)點.appendChild( 要添加的節(jié)點 )

代碼：

document.onclick = function(){
    oDiv2.appendChild(oB2);//將b2追加到div2里面的最后面
}

圖示：

2、insertBefore()

把要插入的節(jié)點添加到指定父級里面的指定節(jié)點之前

使用方式：父級節(jié)點.insertBefore( 要插入的節(jié)點，指定節(jié)點 )

JS代碼：（注：每執(zhí)行一次新方法時，上一個方法都會被注釋掉，為了易懂，此處注釋一次，下面的文章中將不再把注釋上一個方法的代碼發(fā)上來）

document.onclick = function(){
    //oDiv2.appendChild(oB2);此處將上一個方法注釋
    oDiv2.insertBefore(oB2,oSpan2);//將b2插入到div2中的span2前面
}

圖示：

所有瀏覽器都支持此方法，但是值得注意的是，如果第二個參數(shù)節(jié)點不存在，在IE和Safari下會把要添加的節(jié)點使用appendChild()方法追加到指定父級中，而其他主流瀏覽器（Firefox、Chrome、Opera等）下會報錯，所以在插入節(jié)點的時候，需要先判斷第二個參數(shù)節(jié)點是否存在

以上是“JavaScript添加節(jié)點的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！