js insertBefor insertAfter

<div class="btns"><input type="button" value="插入元素" id="creatbtn" οnclick="insertAfter()"/></div>
<div   id="box-one">
<p class="con2" id="p1">1</p>
<p class="con2" id="p2">2</p>
<p class="con2">3</p>
</div>
<script> 
function insertBeforeById() { 
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p2");

newNode.innerHTML =" This is a newcon ";  
oTest.insertBefore(newNode,reforeNode); //新建的元素节点插入到 id为p1的元素前面

}

function insertBeforeByTag() { 
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementsByTagName("p")[1];

newNode.innerHTML =" This is a newcon ";  
oTest.insertBefore(newNode,reforeNode); //新建的元素节点插入到 id为p1的元素前面

}

function insertChild() { 
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
//var reforeNode = document.getElementsByTagName("p")[1];
var reforeNode = oTest.childNodes[1]

newNode.innerHTML =" This is a newcon ";  
oTest.insertBefore(newNode,reforeNode.nextSibling);
}

function insertAfter() { 
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementsByTagName("p")[1];

newNode.innerHTML =" This is a newcon ";  
oTest.insertBefore(newNode,reforeNode.nextSibling);
}
  
</script> 
</body>