insertAfter方法的实现和优化

大家知道，一个DOM节点提供了原生的insertBefore方法，用于在一个节点（假设叫P）内插入一个子节点（假设叫A），同时指定A节点要插入到P的哪个子节点之前。例如P有一个子节点B，要把A节点插入到B之前直接P.inertBefore(A,B)即可，但是，现在想把A插入B之后呢？DOM节点没有原生方法可用，那只能自己写个组件方法了。

先来一个最笨的方法：

//newEle 待插入的新节点
//targetEle 目标节点，新节点要插入这个节点之后
function insertAfter(newEle, targetEle){
	var parentEle = targetEle.parentNode;
	if(parentEle.lastChild === targetEle){
		parentEle.appendChild(newEle);
	}else{
		parentEle.insertBefore(newEle, targetEle.nextSibling);
	}
}

这里做了一个 if判断，如果targetEle是其父节点的最后一个节点 ，那么insertAfter的结果就等价于在targetEle的父节点里append新节点newEle；如果targetEle不是最后一个节点，那么其nextSibling一定存在，所以在其父节点上调用insertBefore方法实现需求。

有人给出了另外一个类似的方法：

function insertAfter(newEle, targetEle){
	var parentEle = targetEle.parentNode,
		nextSibling = targetEle.nextSibling;
	nextSibling ? parentEle.insertBefore(newEle, nextSibling) : parentEle.appendChild(newEle);
}

这个方法稍微好了一点，把if-else语句换成了三目运算，虽然不再判断targetEle是不是最后一个节点，但是判断了 targetEle的nextSibling是不是存在。

其实，调用insertBefore的时候，第二个参数是可以为null的，如果第二个参数为null，效果就等于是appendChild。也就是说，我们可以不必判断targetEle的nextSibling是不是存在，直接在其父节点上调用insertBefore方法即可，于是insertAfter可以最简洁地这么实现：

function insertAfter(newEle, targetEle){
	targetEle.parentNode.insertBefore(newEle, targetEle.nextSibling);
}

测试可知，这么写也兼容IE6等IE系列浏览器，可以安全放心使用~~~