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视频教程