js insertBefore

insertBefore 插入函数 实例

<div class="btns"><input type="button" value="插入元素" id="creatbtn"/></div>

<div   id="box-one">
<p class="con2" id="p1">1</p>
<p class="con2">2</p>
<p class="con2">3</p>
</div>
<script language="javascript">
window.onload =function () {
var btn = document.getElementById("creatbtn");


btn.onclick =function() {
insertEle();
}
}
function insertEle() { 
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");//elem-PublicConfig_showLogo01-001
var zjd_prv = document.getElementById("p1");


newNode.innerHTML =" This is a newcon ";
//oTest.appendChild(newNode);previousSibling 
oTest.insertBefore(newNode,zjd_prv.previousSibling); // 这两种方法均可实现


}
</script>

这里想说的是 nextSibling :某个元素之后紧跟的元素（处于同一树层级中）。
reforeNode.nextSibling ：取得的是reforeNode对象的紧跟着的下一个节点。
previousSibling - 取得某节点的上一个同级节点 
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。