JS实现添加,替换,删除节点元素的方法
本文实例讲述了JS实现添加,替换,删除节点元素的方法。分享给大家供大家参考，具体如下：
一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现
下面是方法：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--CreatedbyTopStyleProTrialVersion-www.bradsoft.com-->
<title>page85删除替换插入</title>
</head>
<bodyonload="insertMessageafter()">
<pid="p1">HelloWorld</p>
</body>
</html>
<script>
functionremoveMessage(){
varop=document.getElementByIdx_x("p1");
//document.body.removeChild(op);
//op.parentNode返回父类节点
op.parentNode.removeChild(op);
}
functionreplaceMessage(){
varnewop=document.createElement_x("p");
newop.appendChild(document.createTextNode("HelloJava"));
//alert(newop.innerHTML);
varoldop=document.getElementByIdx_x("p1");
//document.body.removeChild(op);
//op.parentNode返回父类节点
oldop.parentNode.replaceChild(newop,oldop);
//document.body.replaceChild(newop,oldop)
}
functioninsertMessagebefore(){
varnewop=document.createElement_x("p");
newop.appendChild(document.createTextNode("HelloJava"));
varoldop=document.getElementByIdx_x("p1");
oldop.parentNode.insertBefore(newop,oldop);
}
functioninsertMessageafter(){
varnewop=document.createElement_x("p");
newop.appendChild(document.createTextNode("HelloJava"));
varoldop=document.getElementByIdx_x("p1");
insertafter(newop,oldop);
}
functioninsertbefore(newnode,oldnode){
oldnode.parentNode.insertBefore(newnode,oldnode);
}
functioninsertafter(newnode,oldnode){
//判断oldnode后面还有没有同类别的标记
varnextnode=oldnode.nextSibling;
if(nextnode){//如果没有则为null,则为false,有的话就为true
oldnode.parentNode.insertBefore(newnode,nextnode);
}else{
oldnode.parentNode.appendChild(newnode);
}
}
</script>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript替换操作技巧总结》、《JavaScript传值操作技巧总结》、《javascript编码操作技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。