原生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）之前

function insertafter( newelement, targetelement )

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

var parent = targetelement.parentnode;

再次是，检测目标元素是不是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 );//使用