亲宝软件园·资讯

展开

JS实现添加,替换,删除节点元素的方法

小刚_xiaogang 人气:0

本文实例讲述了JS实现添加,替换,删除节点元素的方法。分享给大家供大家参考,具体如下:

一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现

下面是方法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <!-- Created by TopStyle Pro Trial Version - www.bradsoft.com -->
 <title>page85删除替换插入</title> 
</head>
<body onload="insertMessageafter()">
 <p id="p1">Hello World</p>
</body>
</html>
<script>
 function removeMessage(){
 var op = document.getElementByIdx_x("p1");
 /https://img.qb5200.com/download-x/document.body.removeChild(op);
 //op.parentNode返回父类节点
 op.parentNode.removeChild(op);
 }
 function replaceMessage(){
 var newop = document.createElement_x("p");
 newop.appendChild(document.createTextNode("Hello Java"));
 //alert(newop.innerHTML);
 var oldop = document.getElementByIdx_x("p1");
 /https://img.qb5200.com/download-x/document.body.removeChild(op);
 //op.parentNode返回父类节点
 oldop.parentNode.replaceChild(newop,oldop);
 /https://img.qb5200.com/download-x/document.body.replaceChild(newop,oldop)
 }
 function insertMessagebefore(){
 var newop = document.createElement_x("p");
 newop.appendChild(document.createTextNode("Hello Java"));
 var oldop = document.getElementByIdx_x("p1");
 oldop.parentNode.insertBefore(newop,oldop);
 }
 function insertMessageafter(){
 var newop = document.createElement_x("p");
 newop.appendChild(document.createTextNode("Hello Java"));
 var oldop = document.getElementByIdx_x("p1");
 insertafter(newop,oldop);
 }
 function insertbefore(newnode,oldnode){
 oldnode.parentNode.insertBefore(newnode,oldnode);
 }
 function insertafter(newnode,oldnode){
 //判断oldnode后面还有没有同类别的标记
  var nextnode = oldnode.nextSibling;
 if(nextnode){ //如果没有则为null,则为false,有的话就为true
  oldnode.parentNode.insertBefore(newnode,nextnode);
 }else{
  oldnode.parentNode.appendChild(newnode);
 }
 }
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

加载全部内容

相关教程
猜你喜欢
用户评论