DOM操作：insertAdjacentHTML与Range的实现

最新推荐文章于 2024-10-28 02:13:30 发布

最新推荐文章于 2024-10-28 02:13:30 发布 · 150 阅读

文章标签：

#Chrome #IE #Firefox

DOM 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用insertAdjacentHTML和Range API进行高效DOM操作的方法。通过示例代码展示了如何在不同浏览器环境中将HTML字符串转换为DOM元素并精确地插入到文档中的指定位置。

[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);
}