1 有时候在页面中有个div标签 但是我想在div标签后插入多个标签 那么正常的情况下 是不能一次性插入的 比如说在div标签后 这样插入肯定不行的 div.appendChild(div1,div2,div3);这样是不行的 但是我们可以写个简单的函数来一次性添加多个元素:

 

  1. function append(node){ 
  2.    for(var i=1;i<arguments.length;i++){ 
  3.         node.appendChild(arguments[i]); 
  4.     } 
  5. return node; 
  6. 调用的方式如下: 
  7. append(document.body,div1,div2,div3); 

上面的简单的函数就可以在body里面一次性加入多个元素标签。上面的arguments是每个函数都有的 就是保存函数中的所有变量 类似于数组 但是不是数组 .

2 我们都知道DOM节点有appendChild removeChild insertBefor replaceChild等待方法 当然一次性删除多个子节点的方法 函数也和上面的类似;

 

  1. function delNode(){  
  2.   for(var i=0;i<arguments.length;i++){  
  3.            arguments[i].parentNode.removeChlid(arguments[i]); 
  4.         }  
  5.     } 
  6. 调用方式如下: delNode(div1,div2,div3) ; 

3 有insertBefore这个方法 但是怎么没有insertAfter方法呢 没有关系 我们可以简单的写个函数 简单的分析下:

加入页面有两个标签:<div id="tugenhua"></div><div id="bozhu"></div>

那么如果我想在tugenhua的后面插入个div标签的话 那该怎么办呢!我们都知道在tugenhua后面插入个div标签 也意味着在bozhu前面插入一个是一样的道理!这是第一点 第二点要判断的是 那么如果tugenhau后面没有兄弟节点的话  也就是说tugenhua是最后一个标签的话 那么我想在tugenhua这个ID后面插入一个标签的话 可以在此父元素后面追加一个元素就可以了!原理就上面两点!总结下 1 在一个标签的后面插入一个标签的话 也就意味在此标签的下个兄弟节点前面插入一个元素标签  2 如果此标签没有下个兄弟节点的话 也就是说 他是文档最后一个节点话 那么我可以转到父类 然后再父类最后添加一个标签!下面函数如下:

 

  1. <div id="op" class="op"></div> 
  2.     <p></p> 
  3. <script> 
  4.     var div1 = document.createElement("div"); 
  5.     var op = document.getElementById("op"); 
  6.         function insertAfter(node,newNode){ 
  7.             //如果当前的 节点 有下个兄弟节点的话  那么让他插入到下个兄弟节点的前面去 
  8.             //如果当前的节点没有下个兄弟节点 那么让他先到父节点 父节点再最后增加一个子节点 
  9.             var pn = op.parentNode; 
  10.             if(node.nextSibling){ 
  11.                 pn.insertBefore(newNode,node.nextSibling);   
  12.             }else
  13.                 pn.appendChild(newNode); 
  14.             } 
  15.             return newNode; 
  16.         } 
  17.         insertAfter(op,div1); 
  18. </script>