[b]利用insertAdjacentHTML与Range实现DOM操作,可以允许我们把一串字符串快速的转变为DOM元素,并插入到文档中的具体位置。[/b]
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);
}