前面在JS之DOM中我们知道了属性操作，下面我们来了解一下节点操作。很重要！！
一、节点操作
创建节点：var ele_a = document.createElement('a');
添加节点：ele_parent.appendChild(ele_img);
删除节点：ele_parent.removeChild(ele_p);
替换节点：ele_parent.replaceChild(新标签,旧标签);
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>节点操作</title> 6 <style> 7 .c1 { 8 width: 300px; 9 height: 200px; 10 border: 1px solid red; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="c1"> 16 <p >年后</p> 17 <p >hello</p> 18 </div> 19 <button class="addBtn">ADD</button> 20 <button class="delBtn">DEL</button> 21 <button class="replaceBtn">Replace</button> 22 <ul> 23 <li>创建节点：var ele_a = document.createElement('a');</li> 24 <li>添加节点：ele_parent.appendChild(ele_img);</li> 25 <li>删除节点：ele_parent.removeChild(ele_p);</li> 26 <li>替换节点：ele_parent.replaceChild(新标签,旧标签);</li> 27 </ul> 28 <table border="1"> 29 <tbody > 30 <tr> 31 <td><input type="checkbox"></td> 32 <td><input type="text"></td> 33 <td><button class="delbtn">del1</button></td> 34 </tr> 35 <tr> 36 <td><input type="checkbox"></td> 37 <td><input type="text"></td> 38 <td><button class="delbtn">del2</button></td> 39 </tr> 40 <tr> 41 <td><input type="checkbox"></td> 42 <td><input type="text"></td> 43 <td><button class="delbtn">del3</button></td> 44 </tr> 45 <tr> 46 <td><input type="checkbox"></td> 47 <td><input type="text"></td> 48 <td><button class="delbtn">del4</button></td> 49 </tr> 50 </tbody> 51 </table> 52 <script> 53 var ele_add = document.getElementsByClassName('addBtn')[0]; 54 var ele_del = document.getElementsByClassName('delBtn')[0]; 55 var ele_repleace = document.getElementsByClassName('replaceBtn')[0]; 56 console.log(ele_add); 57 //绑定的添加节点的事件 58 ele_add.onclick = function () { 59 //先创建一个标签 60 var ele_a = document.createElement('a'); 61 console.log(ele_a); //<a></a> 62 ele_a.innerHTML = '点击'; //<a>点击</a> 63 ele_a.href = 'http://www.baidu.com'; //<a href='http://www.baidu.com'>点击</a> 64 //先创建一个标签 65 var ele_img = document.createElement('img'); 66 ele_img.src = '1.png'; 67 ele_img.width = 50; 68 ele_img.height = 50; 69 //找到父标签 70 var ele_parent = document.getElementsByClassName('c1')[0]; 71 //然后添加 72 ele_parent.appendChild(ele_a); 73 ele_parent.appendChild(ele_img); 74 }; 75 //绑定的删除节点的事件 76 ele_del.onclick = function () { 77 //先获取要删除的元素 78 var ele_p = document.getElementById('p1'); 79 //获取它的父元素 80 var ele_parent = document.getElementsByClassName('c1')[0]; 81 //然后删除（注意是父元素删除子元素） 82 ele_parent.removeChild(ele_p) 83 }; 84 //绑定的替换节点的事件 85 ele_repleace.onclick = function () { 86 //找被替换的标签（旧标签） 87 var ele_p = document.getElementById('p2'); 88 //创建一个替换后的标签（新标签） 89 var ele_img = document.createElement('img'); 90 ele_img.src = '2.png'; 91 ele_img.width = 100; 92 ele_img.height = 50; 93 //找到父节点 94 var ele_parent = document.getElementsByClassName('c1')[0]; 95 //做替换（父节点替换子节点中的某一个节点）：相当于一次删除加一次添加 96 ele_parent.replaceChild(ele_img, ele_p); 97 } 98 </script> 99 <script> 100 //绑定删除节点的事件 101 var ele_dels = document.getElementsByClassName('delbtn'); 102 for(var i=0;i<ele_dels.length;i++){ 103 ele_dels[i].onclick = function () { 104 //获取删除的元素 105 var ele_tr = this.parentElement.parentElement; 106 // console.log(ele_tr) 107 //找到父节点 108 var ele_tbody_parent =document.getElementById('t1'); 109 //然后删除 110 ele_tbody_parent.removeChild(ele_tr) 111 } 112 } 113 </script> 114 </body> 115 </html>