首页 > 网络编程 > JavaScript > javascript技巧 > 原生js添加节点appendChild、insertBefore

原生js添加节点appendChild、insertBefore方式

2023-10-25 09:27:44 作者：LLL_LH

这篇文章主要介绍了原生js添加节点appendChild、insertBefore方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

原生js添加节点appendChild、insertBefore

1、createElement()

创建元素节点

var element=document.createElement(‘元素名');

2、crateTextNode()

创建文本节点

var txt=document.crateTextNode(‘文本内容');

3、createAttribute()

创建属性节点

var attr=document.createAttribute(‘属性名');
attr.value='属性值';

4、appendChild()

方法向节点添加最后一个子节点

如下：

<div id="box" class="classa">
    <p id="p1">这是一个段落</p>
</div>
<script>
    var box=document.getElementById("box");
    var p2=document.createElement("p");  //创建元素节点
    var txt=document.createTextNode("这是另一个段落"); //创建文本节点
    p2.appendChild(txt); //把创建的文本节点追加到元素节点中
    var attr=document.createAttribute("id"); //创建属性节点
    attr.value="p2"; //给属性节点设置值
    p2.setAttributeNode(attr); //给元素设置属性节点
    box.appendChild(p2);  //把创建的p元素追加到box最后
    console.log(box);


</script>

结果如下：

<div id="box" class="classa">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

5、insertBefore()

在指定的子节点之前插入新的子节点

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>