1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 window.onload= function(){ 9 //创建一个广州节点，添加到#city下 10 myclick("btn01",function fun(){ 11 //创建广州节点 12 //1 创建li元素节点 13 /* 14 document.createElement(); 15 可以用于创建一个元素节点对象 16 17 */ 18 var li=document.createElement("li"); 19 //2创建文本节点 20 21 //将广州节点添加 22 23 var gzText=document.createTextNode("广州"); 24 //将gzText设置为li的子节点 25 /* appendChild() 26 向父节点中添加一个新的子节点 27 用法：父节点.appendChild(子节点);*/ 28 li.appendChild(gzText); 29 //获取id为city的节点 30 var city=document.getElementById("city"); 31 city.appendChild(li); 32 33 }); 34 35 36 37 // 将广州节点插入到#bj前面 38 myclick("btn02",function fun(){ 39 40 var li=document.createElement("li"); 41 42 var gzText=document.createTextNode("广州"); 43 var bj=document.getElementById("bj"); 44 li.appendChild(gzText); 45 //获取id为city的节点 46 var city=document.getElementById("city"); 47 48 //insertBefore() 49 /* 可以在指定的子节点前插入新的节点 50 用法：父节点.insertBefore(新节点,旧节点);*/ 51 city.insertBefore(li,bj); 52 53 }); 54 55 56 // 使用广州节点替换#bj节点 57 myclick("btn03",function fun(){ 58 59 var li=document.createElement("li"); 60 61 var gzText=document.createTextNode("广州"); 62 var bj=document.getElementById("bj"); 63 li.appendChild(gzText); 64 //获取id为city的节点 65 var city=document.getElementById("city"); 66 67 //replaceChild() 68 /* 可以替换节点 69 用法：父节点.insertBefore(新节点,旧节点);*/ 70 city.replaceChild(li,bj); 71 72 }); 73 74 //删除北京节点 75 myclick("btn04",function fun(){ 76 var bj=document.getElementById("bj"); 77 var city=document.getElementById("city"); 78 /* 79 removeChild() 80 删除对应节点 81 用法：父节点.removeChild(节点); 82 83 节点.parentNode.removeChild(节点); 84 */ 85 //city.removeChild(bj); 86 bj.parentNode.removeChild(bj); 87 }); 88 89 //读取#city内的html代码 90 91 myclick("btn05",function fun(){ 92 var city=document.getElementById("city"); 93 console.log(city.innerHTML); 94 }); 95 // 设置#bj内的html代码 96 myclick("btn06",function fun(){ 97 var city=document.getElementById("city"); 98 bj.innerHTML="娄底"; 99 }); 100 101 }; 102 103 function myclick(idstr,fun){ 104 var btn=document.getElementById(idstr); 105 btn.onclick=fun; 106 } 107 </script> 108 </head> 109 <body> 110 <div id="total"> 111 <div class="inner"> 112 <p> 113 你喜欢哪个城市？ 114 </p> 115 116 <ul id="city"> 117 118 <li id="bj">北京</li> 119 <li>上海</li> 120 <li>东京</li> 121 <li>首尔</li> 122 </ul> 123 </div> 124 125 </div> 126 127 <div id="btnlist"> 128 <div><button id="btn01">创建一个广州节点，添加到#city下</button></div> 129 <div><button id="btn02">将广州节点插入到#bj前面</button></div> 130 <div><button id="btn03">使用广州节点替换#bj节点</button></div> 131 <div><button id="btn04">删除#bj节点</button></div> 132 <div><button id="btn05">读取#city内的html代码</button></div> 133 <div><button id="btn06">设置#bj内的html代码</button></div> 134 135 </div> 136 </body> 137 </html>
通过以上操作，可以对dom元素进行增删改查，希望大家可以掌握！