DOM操作：insertAdjacentHTML与Range的实现

利用insertAdjacentHTML与Range实现DOM操作，可以允许我们把一串字符串快速的转变为DOM元素，并插入到文档中的具体位置。

function fn(){
//IE 和 Chrome
	var str = '<div style="width:200px;height:100px;background-color:gray;">Content here</div>';
	var b = document.getElementById("b");
	//b.insertAdjacentHTML('BeforeBegin',str);//把str元素插入在b之前
	//b.insertAdjacentHTML('AfterBegin',str);//把str元素插入作为b的第一个子元素
	//b.insertAdjacentHTML('BeforeEnd',str);//把str元素插入作为b的最后一个子元素
	b.insertAdjacentHTML('AfterEnd',str);//把str元素插入在b之后
}
function fn2(){
//Firefox
	var str = '<div style="width:200px;height:100px;background-color:gray;">Content here</div>';
	var b = document.getElementById("b");
	var range = document.createRange();
	frag = range.createContextualFragment(str);
	//BeforeBegin
	 //range.setStartBefore(b);
     //b.parentNode.insertBefore(frag, b);
	
	//afterbegin
	//range.setStartBefore(b.firstChild);
   // b.insertBefore(frag, b.firstChild);

   //beforeend
    range.setStartAfter(b.lastChild);
    b.appendChild(frag);

    //AfterEnd
	//range.setStartAfter(b);
	//b.parentNode.insertBefore(frag, b.nextSibling);
}