【JS】原生JS的DOM操作之插入元素

插入元素主要是：在已有元素前插入元素和在已有元素后插入元素

在已有元素前插入元素

DOM提供了insertBefore()方法，这个方法将一个新元素插入到一个现有的元素中
需要满足三个条件：

1. 新元素：你想插入的元素 （newElement）
2. 目标元素：你想把这个新元素插入到那个元素（targetElement）之前
3. 父元素：目标元素的父元素（parentElement）

parentElement.insertBefore( newElement , targetElement );

//这里parentElement = targetElement.parentNode
var newEle = getElementById('#newEle'); //新添加的元素
var oldEle= getElementById('#oldEle'); //现有的元素
oldEle.parentNode.insertBefore( newEle,oldEle );
//将newEle插入到oldEle之前

在已有元素后插入元素

DOM并没有提供在已有元素之后插入元素，因此我们需要写一个insertAfter()；
需要用到的DOM属性：

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

首先，我们需要两个参数：被插入的新元素，已有的元素，

1. 新元素：你想插入的元素 （newElement）
2. 目标元素：你想把这个新元素插入到那个元素（targetElement）之前

其次，把目标元素的parentNode属性值保存到parent

再次是，检测目标元素是不是parent最后一个子元素，就是比较parent元素的lastChild属性值是否等于目标元素

if( parent.lastChild == targetElemnt )

如果相等，就用appendChild()方法追加到parent元素上，这样新元素就恰好插入到目标元素之后
如果不相等，就把新元素插入到目标元素和目标元素的下一个兄弟节点之间，目标元素的下一个兄弟节点是nextSibling，用insertBefore()方法插入到目标元素下一个兄弟元素之前

parent.insertBefore( newElement, targetElement.nextSiblings ) 

完整代码：

	function insertAfter( newELement, targetElement ){
		var parent = targetElement.parentNode;
		if( parent.lastChild == targetElment ){
			parent.appendChild( newElment );
		}else{
			parent.insertBefore( newElement, targetElement.nextSibling );
		}
	} 
	insertAfter( newEle,oldEle );//使用