javascript实现把一个节点插入到另一个节点之后

DOM提供了一个方法，叫做insertBefore(),其作用是在已有节点之前插入新的子节点。遗憾的是，DOM并没有提供一个insertAfter()的方法—即在一个节点之后插入一个节点。

本文所讲的是如何用JS实现在一个节点之后插入另一个节点，也就是编写一个属于自己的insertAfter()。这儿顺便给出insertBefore()的相关语法，因为在自己编写的insertAfter()方法中，会使用到insertBefore()。

node.insertBefore(newnode,existingnode)
参数             类型        描述
newnode         Node 对象   必需。需要插入的节点对象。
existingnode    Node 对象   可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。                      

---

以下就是用js实现的insertAfter()代码

function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

代码本身是很简单的，为了便于理解，还是给出解释。

1. 函数有两个参数，newElement,targetElement。分别是将被插入的新元素，和目标元素
2. 我们将目标元素的父元素(parentNode)保存在 变量parent中
3. 如果目标元素是父元素(parentNode)的最后一个子元素，
   就用appendChild方法把新元素追加到parent元素上，这样新元素就恰好插入到 目标元素之后
4. 如果目标元素不是父元素(parentNode)的最后一个子元素，用insertBefore方法把新元素插入到目标元素的下一个兄弟元素(targetElement.nextSibling)之前。

---

这个函数的实现呢，在《Javascript DOM 编程艺术》第七章是有讲到的。如果想了解更多的知识，最好看看原书。