首頁 > web前端 > js教程 > 原生js添加节点appendChild、insertBefore

原生js添加节点appendChild、insertBefore

PHPz
發布: 2018-10-10 15:11:48
轉載
3423 人瀏覽過

1、createElement() 创建元素节点
var element=document.createElement(‘元素名’);

2、crateTextNode() 创建文本节点
var txt=document.crateTextNode(‘文本内容’);

3、createAttribute() 创建属性节点
var attr=document.createAttribute(‘属性名’);
attr.value=’属性值’;

4、appendChild() 方法向节点添加最后一个子节点
如下:

<p id="box" class="classa">
    <p id="p1">这是一个段落</p></p><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>
登入後複製

结果如下:

<p id="box" class="classa">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是另一个段落</p></p>
登入後複製

5、insertBefore() 在指定的子节点之前插入新的子节点
parent.insertBefore(newChild,oldChild);
如下:

<p id="box">
    <p id="p1">这是一个段落</p></p><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>
登入後複製

结果如下:

<p id="box">
    <p>这是一个新段落</p>
    <p id="p1">这是一个段落</p></p>
登入後複製

更多相关教程请访问 JavaScript视频教程     

來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板