DOM中不存在的insertAfter（）方法

DOM提供了名为insertBefore()的方法，这个方法的作用是将一个新元素插入到一个现有元素的前面。

调用语法如下  parentElement(父元素).insertBefore(newElement(新元素), targetElement(目标元素))

知道的人都知道DOM本身没有提供insertAfter方法，但是它确实提供了把一个节点插入到另一个节点之后所需的工具。

我们完全可以利用已有的DOM方法和属性编写一个insertAfter函数。

代码如下：（功能就是将一个新元素插入到现有元素后面）

function insertAfter(newElemnet, targetElement){

var parent = targetElement.parentNode;

if(parent.lastChild == targetElement){

parent.appendChild(newElement);

}else{

parent.insertBefore(newElement, targetElement.nextSibling);

}

}

这个函数用到了以下DOM方法和属性：

• parentNode属性
  
•  lastChild属性
• appendChild方法
• insertBefore方法
• nextSibling属性

表面上看，函数很复杂，那我们不妨把他分成几个小部分来理解。

1. 首先，这个函数有2个参数：新元素与目标元素。这2个参数通过变量newElement和targetElement被传递到这个函数。
2. 把目标元素的parentNode属性值保留在变量parent里。
3. 检查目标元素是不是parent 的最后一个子元素，即比较parent元素的lastChild属性值与目标元素是否存在“等于”关系。
4. 如果是，就用appendChild方法追加。
5. 如果不是，就把新元素插入到目标元素和目标元素的下一个兄弟元素之间。目标元素的下一个兄弟元素即目标元素的nextSibling属性。然后用insertBefore方法把新元素插入到目标元素的下一个兄弟元素之前。

ps：像这种实用型的函数有必要收录在你的脚本里。