js里的insertBfore 和自定义的insertAfter

在js里insertBefore() 方法在您指定的已有子节点之前插入新的子节点。下面是代码

html添加前
<div id="box">
    <span id="box1"></span>
</div>

var box = document.getElementById("box");  //父节点
var box1 = document.getElementById("box1"); //已存在的子节点
var box2 = document.createElement("i");    //创建一个新的节点
box.insertBefore(box2,box1);       //父节点.inserBrfore(新节点,旧节点);  在这个父节点下面的旧节点(已存在的节点)前插入一个新创建的节点

html添加后
<div id="box">
    <i></i>
    <span id="box1"></span>
</div>

现在js有一个插入节点前面的，不过js没有提供插入节点后面的，那我们现在自定义一个insertAfter的函数用于添加到已知节点后面

html添加前
<div id="box">
    <span id="box1"></span>
</div>

var box = document.getElementById("box");  //父节点
var box1 = document.getElementById("box1"); //已存在的子节点
var box2 = document.createElement("i");    //创建一个新的节点

fucntion insertAfter(new,old){
    var parent = old.parentNode;  //获取旧节点的父元素
    if(parent.lastChild == old){  //如果父元素的最后一个子节点是old
        parent.appendChild(new);  //直接添加到parent的最后面
    }else{
        parend.insertBefore(new,old.nextSibling);  //否则把新节点插入到旧节点的下一个兄弟节点处
    }

}


insertAfter(box2,box1);       //insertAfter(新节点,旧节点); 

html添加后
<div id="box">
    <span id="box1"></span>
     <i></i>
</div>