javascript节点的汇总

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

 

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

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

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

 

function delNode(){
  for(var i=0;i<arguments.length;i++){
           arguments[i].parentNode.removeChlid(arguments[i]);
        }
    }
调用方式如下: 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 如果此标签没有下个兄弟节点的话 也就是说 他是文档最后一个节点话 那么我可以转到父类 然后再父类最后添加一个标签！下面函数如下：

 

<div id="op" class="op"></div>
    <p></p>
<script>
    var div1 = document.createElement("div");
    var op = document.getElementById("op");
        function insertAfter(node,newNode){
            //如果当前的 节点 有下个兄弟节点的话  那么让他插入到下个兄弟节点的前面去
            //如果当前的节点没有下个兄弟节点 那么让他先到父节点 父节点再最后增加一个子节点
            var pn = op.parentNode;
            if(node.nextSibling){
                pn.insertBefore(newNode,node.nextSibling);
            }else{
                pn.appendChild(newNode);
            }
            return newNode;
        }
        insertAfter(op,div1);
</script>