DOM增删改

上一篇主要是针对查询的，本文主要针对的是DOM的增删改

添加节点：

       1，appendChild() 用于向ChildNodes列表的末尾添加一个节点，返回新增的节点，如果传入到appendChild()中通的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新的位置。因此 如果在调用appendChild()传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
 var a=document.getElementsByTagName('ul')[0];
 var node1=a.firstElementChild;
 var returnnode1=a.appendChild(node1);
 alert(returnnode1== a.lastElementChild);  // true
 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时只复制 本级节点

var a = document.getElementById('1123'); 
var b = a.cloneNode(true); 
document.getElementById('aaaa').appendChild(b); 
var x=  document.importNode(a,true); 
document.getElementById('aaaa').appendChild(x);

注： 这两个方法复制的节点 可再次插入到之前的父节点中  这和上面的appendChild和insertBefore() 就有点区别了 appendChild() 和insertBefore() 如果插入已存在的节点则会将之前的节点指向新的位置 就是不能重复添加,但是cloneNode() 和importNode()  则产生的是一个新的对象 新的节点 因此能重复添加

      

      <div id="a1123"> 
           <ul id="uld"> 
               <li>123</li> 
           </ul> 
       </div>
            var a = document.getElementById('uld'); 
            var b = a.cloneNode(true); 
            document.getElementById('a1123').appendChild(a);//添加已存在的节点-无效果 
            document.getElementById('a1123').appendChild(b);//添加克隆后的节点 能添加
            var x=  document.importNode(a,true);
            document.getElementById('a1123').appendChild(x);//添加导入后的节点 能添加

参考自：《JavaScrpt高级程序设计》 《JavaScrpt权威指南JavaScrpt》