JS(JavaScript)插入节点的方法appendChild与insertBefore

首先 从定义来理解 这两个方法：

appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)

insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)

相同之处：插入子节点

不同之处：实现原理方法不同。

　　　　　appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。

　　　　 insertBefore 方法 是在已有的节点前添加新的节点（相对于子节点来说的）。

1.来看个这个简单的实例：在id为box-con 的末尾添加一个子节点div

<div   id="box-one">
	<p class="con2" id="p1">1</p>
	<p class="con2">2</p>
	<p class="con2">3</p>
</div>

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");

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

3.这个insertBefore 的第一个参数 和appendChild的一样，都是那个新的节点变量，而insert第二个参数不仅可以为null 。也可以这样写呢

function insertEle() {
	var oTest = document.getElementById("box-one");
	var newNode = document.createElement("div");
	var reforeNode = document.getElementById("p1");

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