JS插入节点的方法appendChild、insertBefore

html

	<div style="background:gray"> <input type="button" value="插入节点" id="createEle" ></div>
		<div id="div2" style="background:red">
			<p id="1">1</p>
			<p>2</p>
			<p>3</p>   
			
		</div>

js

function insert(){
var div2 =document.getElementById("div2");
var newNode =document.createElement("div");
newNode.innerText="插入div2";
// div2.appendChild(newNode);//在父节点（id为div2的元素）中的子节点的末尾添加新的元素（相对于父节点来说）注：是 父子层级
// div2.insertBefore(newNode,null);//和appendChild(newNode) 效果一样

var p1 =document.getElementById("1");
//在同一级别的节点中
//previousSibling 表示 p1节点的上一个节点
//nextSibling 表示 p1节点的下一个节点，即某个元素之后紧跟的元素（处于同一树层级中）。
div2.insertBefore(newNode,p1.nextSibling.nextSibling.previousSibling);//在p1节点的下一个节点的下一个节点的上一个节点插入节点


//总结：由于可见insertBefore()方法的特性是:
//在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，
//是可以在子节点列表的任意位置。

}