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视频教程
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
