用javascript实现html元素的增删查改[xyytit] 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 <html>
  4 
  5 <head>
  6 
  7 <title>用javascript实现html元素的增删查改</title>
  8 
  9 <script type="text/javascript"><!--
 10 
 11     function $(nodeId) {
 12 
 13         return document.getElementById(nodeId);
 14 
 15     }
 16 
 17     function $Name(tagName) {
 18 
 19         return document.getElementsByTagName(tagName);
 20 
 21     }
 22     //1. 替换标签
 23     function replaceMsg() {
 24 
 25         var newNode = document.createElement("P"); //创建一个P标签 
 26 
 27         newNode.innerHTML = "<font color='red'>替换后的文字</font>";
 28 
 29         var oldNode = $Name("P")[0]; //获取body里面第一个p元素 
 30 
 31         oldNode.parentNode.replaceChild(newNode, oldNode); //直接替换了标签 
 32 
 33     }
 34     //2. 删除标签
 35     function removeMsg() {
 36 
 37         var node = $("p2"); //p标签 
 38 
 39         var nodeBtn = $("remove"); //按钮 
 40 
 41         //node.parentNode.removeChild(node); //下面效果相同 
 42 
 43         document.body.removeChild(node); //在body中删除id为P2的元素 
 44 
 45         //nodeBtn.parentNode.removeChild(nodeBtn);//删除该按钮 
 46 
 47         document.body.removeChild(nodeBtn);
 48 
 49         //document.body.removeNode();执行这条语句将清空body里面的任何元素 
 50 
 51     }
 52     //3. 前面添加标签
 53     function addbefore() {
 54 
 55         var newNode = document.createElement("p"); //创建P标签 
 56 
 57         //var newText = document.createTextNode("前面添加的元素"); 
 58 
 59         //newNode.appendChild(newText);//与下面效果一样 
 60 
 61         newNode.innerHTML = "<font color='red'>前面添加的元素</font>"; //书写P标签里面的内容 
 62 
 63         var oldNode = $("p3"); //目标标签 
 64 
 65         //document.body.insertBefore(newNode,oldNode); 
 66 
 67         oldNode.parentNode.insertBefore(newNode, oldNode); //在目标标签前面添加元素 
 68 
 69     }
 70     //4. 后面添加标签
 71     function addlast() {
 72 
 73         var newNode = document.createElement("p"); //创建P标签 
 74 
 75         //var newText = document.createTextNode("后面添加的元素"); 
 76 
 77         //newNode.appendChild(newText);//与下面效果一样 
 78 
 79         newNode.innerHTML = "<font color='red'>后面添加的元素</font>";
 80 
 81         var oldNode = $("p3");
 82 
 83         oldNode.appendChild(newNode);
 84 
 85         //document.body.appendChild(newNode);//如果使用该方法,则在body的最后添加元素 
 86 
 87     }
 88 
 89 // --></script>
 90 
 91 </head>
 92 
 93 <body>
 94 
 95 <p id="p1">Hello World!
 96 
 97   <input type="button" value="替换内容" onclick="replaceMsg();" />
 98 
 99 <p id="p2">我可以被删除!
100 
101   <input type="button" id="remove" value="删除它" onclick="removeMsg();" />
102 
103 <p id="p3">在我上下添加一个元素吧！
104 
105   <input type="button" id="addbefore" value="前面添加" onclick="addbefore();" />
106 
107   <input type="button" id="addlast" value="后面添加" onclick="addlast();" />

 

posted on 2013-12-10 17:26  逍遥云天  阅读(487)  评论(0)  编辑  收藏  举报

导航