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();" />