DOM增删改
上一篇主要是针对查询的，本文主要针对的是DOM的增删改
添加节点：
1，appendChild() 用于向ChildNodes列表的末尾添加一个节点，返回新增的节点，如果传入到appendChild()中通的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新的位置。因此 如果在调用appendChild()传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点
1 <div> 2 <ul> 3 <li>1</li> 4 <li>2</li> 5 <li>3</li> 6 </ul> 7 </div> 8 var a=document.getElementsByTagName('ul')[0]; 9 var node1=a.firstElementChild; 10 var returnnode1=a.appendChild(node1); 11 alert(returnnode1== a.lastElementChild); // true 12 alert(returnnode1== a.firstElementChild); // false 说明返回的就是添加的那个节点
2，insertBefore(),该方法接收两个参数 要插入的节点和作为参照的节点，插入后被插入的节点就会变成参考节点的前一个同胞节点，同时被方法返回 插入成为第一个子节点 则var returnNode=someNode.insertBefore (newNode,someNode.firstChild); alert(returnNode==someNode.lastElementChild); 插入成为最后一个子节点 第二个参数 为null 即可 这个方法的关键是要理解：会插入到参考节点的前面
删除节点
removeChild() 该方法只接受一个参数 就是要删除的节点
替换节点
replaceChild() 第一个参数为要插入的节点 第二个参数为要替换的节点
这个几个方法的共性是 操作的都是某个节点的子节点，使用之前必须先取到其父节点，另外不是所有类型的节点都有子节点（nodeType为 3，4，7，8，10，12的节点类型均为子节点）如果在这些节点上 调用上述方法会报错
其他方法：
1，cloneNode() 用于常见创建调用这个方法的节点的一个完全的副本（该方法不复制javascript属性 如事件处理程序） 接受一个参数
为true 执行深复制 复制该节点及其整个子节点树
为false 执行浅复制 只复制该节点
2，和上面方法相似的还有importNode() 方法 该方法是document 对象上的方法 接受两个参数 要导入的节点 和 一个bool值 当为true时 复制子孙节点 为false时只复制 本级节点
1 var a = document.getElementById('1123'); 2 var b = a.cloneNode(true); 3 document.getElementById('aaaa').appendChild(b); 4 var x= document.importNode(a,true); 5 document.getElementById('aaaa').appendChild(x);
注： 这两个方法复制的节点 可再次插入到之前的父节点中 这和上面的appendChild和insertBefore() 就有点区别了 appendChild() 和insertBefore() 如果插入已存在的节点则会将之前的节点指向新的位置 就是不能重复添加,但是cloneNode() 和importNode() 则产生的是一个新的对象 新的节点 因此能重复添加
1 <div id="a1123"> 2 <ul id="uld"> 3 <li>123</li> 4 </ul> 5 </div> 7 var a = document.getElementById('uld'); 8 var b = a.cloneNode(true); 9 document.getElementById('a1123').appendChild(a);//添加已存在的节点-无效果 10 document.getElementById('a1123').appendChild(b);//添加克隆后的节点 能添加 11 var x= document.importNode(a,true); 12 document.getElementById('a1123').appendChild(x);//添加导入后的节点 能添加
参考自：《JavaScrpt高级程序设计》 《JavaScrpt权威指南JavaScrpt》
