欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js添加節(jié)點(diǎn)appendChild、insertBefore方式

 更新時(shí)間：2023年10月25日 09:27:43   作者：LLL_LH  
這篇文章主要介紹了原生js添加節(jié)點(diǎn)appendChild、insertBefore方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

原生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)文章

最新評(píng)論