原生js添加節(jié)點appendChild、insertBefore方式
更新時間：2023年10月25日 09:27:43 作者：LLL_LH
這篇文章主要介紹了原生js添加節(jié)點appendChild、insertBefore方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
原生js添加節(jié)點appendChild、insertBefore
1、createElement()
創(chuàng)建元素節(jié)點
var element=document.createElement(‘元素名');
2、crateTextNode()
創(chuàng)建文本節(jié)點
var txt=document.crateTextNode(‘文本內(nèi)容');
3、createAttribute()
創(chuàng)建屬性節(jié)點
var attr=document.createAttribute(‘屬性名'); attr.value='屬性值';
4、appendChild()
方法向節(jié)點添加最后一個子節(jié)點
如下：
<div id="box" class="classa">
<p id="p1">這是一個段落</p>
</div>
<script>
var box=document.getElementById("box");
var p2=document.createElement("p"); //創(chuàng)建元素節(jié)點
var txt=document.createTextNode("這是另一個段落"); //創(chuàng)建文本節(jié)點
p2.appendChild(txt); //把創(chuàng)建的文本節(jié)點追加到元素節(jié)點中
var attr=document.createAttribute("id"); //創(chuàng)建屬性節(jié)點
attr.value="p2"; //給屬性節(jié)點設(shè)置值
p2.setAttributeNode(attr); //給元素設(shè)置屬性節(jié)點
box.appendChild(p2); //把創(chuàng)建的p元素追加到box最后
console.log(box);
</script>結(jié)果如下：
<div id="box" class="classa">
<p id="p1">這是一個段落</p>
<p id="p2">這是另一個段落</p>
</div>
5、insertBefore()
在指定的子節(jié)點之前插入新的子節(jié)點
parent.insertBefore(newChild,oldChild);
如下：
<div id="box">
<p id="p1">這是一個段落</p>
</div>
<script>
var box=document.getElementById("box");
var p1=document.getElementById("p1");
var p0=document.createElement("p");
var txt=document.createTextNode("這是一個段落");
p0.appendChild(txt);
box.insertBefore(p0,p1);
console.log(box);
</script>結(jié)果如下：
<div id="box">
<p>這是一個新段落</p>
<p id="p1">這是一個段落</p>
</div>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JS 判斷某變量是否為某數(shù)組中的一個值的3種方法(總結(jié))
下面小編就為大家?guī)硪黄狫S 判斷某變量是否為某數(shù)組中的一個值的3種方法(總結(jié))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
今天，這篇文章將利用HTML，CSS，JS的知識編寫一個童年經(jīng)典游戲?-?推箱子，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-11-11
下面小編就為大家?guī)硪黄Mjavascript中的sort排序(簡單實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08![javascript中new Array()和var arr=[]用法區(qū)別](http://img.jbzj.com/images/xgimg/bcimg3.png)
javascript中new Array()和var arr=[]用法區(qū)別
給大家分析一下在javascript中數(shù)組函數(shù)new Array()和var arr=[]用法區(qū)別，一起跟著學(xué)習(xí)一下吧。2017-12-12
OFFICE控件測試代碼，主要是控制office的一些功能，需要的朋友可以參考下。2009-12-12
利用JavaScript實現(xiàn)簡單的網(wǎng)頁時鐘
這篇文章主要介紹了利用JavaScript實現(xiàn)簡單的網(wǎng)頁時鐘，主要使用了js的日期對象,實現(xiàn)的時候先創(chuàng)建一個日期對象，并進行網(wǎng)頁布局,對時間獲取之后將時間填入對應(yīng)的標(biāo)簽內(nèi)。然后使用多線程實現(xiàn)時鐘的變動,需要的朋友可以參考一下2022-02-02
JavaScript對JSON數(shù)組簡單排序操作示例
這篇文章主要介紹了JavaScript對JSON數(shù)組簡單排序操作,結(jié)合實例形式分析了javascript使用sort()方法針對json數(shù)組元素排序的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細介紹了Bootstrap基本布局實現(xiàn)方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
在Openlayers中,使用ol/sphere模塊的getDistance函數(shù)可以計算兩點間的大圓距離,繪制線路時,通過監(jiān)聽繪制事件和幾何對象的變化,可實時更新距離,同時getLength函數(shù)幫助獲取整條線路的長度,這些功能主要用于地理信息系統(tǒng)中的距離測量和地圖制作2024-11-11
async/await實現(xiàn)Promise.all()的方式
Promise.all() 方法接收一個 promise 的 iterable 類型的輸入，并且只返回一個Promise實例，并且輸入的所有 promise 的 resolve 回調(diào)的結(jié)果是一個數(shù)組，對async/await實現(xiàn)Promise.all()相關(guān)知識感興趣的朋友一起看看吧2022-12-12