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>