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