兼容浏览器的insertAdjacentHTML

参数资料:

msdn.microsoft.com/en-us/library/ms536452(VS.85).aspx

www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-setStartBefore

https://developer.mozilla.org/en/DOM/range.createContextualFragment

www.never-online.net/blog/article.asp?id=113

首先是IE里有 insertAdjacentHTML,而且很好用。为了兼容其它浏览器就有了如下的函数“insertHTML”

重点:

1、为了兼容其它浏览器,支持beforeBegin、afterBegin、beforeEnd、afterEnd

2、如何将字符串String转换为文档碎片(fragment)或是Dom树(Dom tree),因为使用innerHTML无法指定位置。

将字符串转换为Dom tree,参数这里:range.createContextualFragment,contextual翻译过来好像是“语境”的意思??

range的起始位置的设置,参数setStartBeforesetStartAfter

下面就是完整的代码了(IE中可根据需要是否返回附加的dom):

/**
 * 
 * 
 * @param {HTMLElement} el
 * @param {String} where beforeBegin、afterBegin、beforeEnd、afterEnd
 * @param {String} html
 */
function insertHTML(el, where, html) {
	if (!el) {
		return false;
	}
	
	where = where.toLowerCase();
	
	if (el.insertAdjacentHTML) {//IE
		el.insertAdjacentHTML(where, html);
	} else {
		var range = el.ownerDocument.createRange(),
			frag = null;
		
		switch (where) {
			case "beforebegin":
				range.setStartBefore(el);
				frag = range.createContextualFragment(html);
				el.parentNode.insertBefore(frag, el);
				return el.previousSibling;
			case "afterbegin":
				if (el.firstChild) {
					range.setStartBefore(el.firstChild);
					frag = range.createContextualFragment(html);
					el.insertBefore(frag, el.firstChild);
				} else {
					el.innerHTML = html;
				}
				return el.firstChild;
			case "beforeend":
				if (el.lastChild) {
					range.setStartAfter(el.lastChild);
					frag = range.createContextualFragment(html);
					el.appendChild(frag);
				} else {
					el.innerHTML = html;
				}
				return el.lastChild;
			case "afterend":
				range.setStartAfter(el);
				frag = range.createContextualFragment(html);
				el.parentNode.insertBefore(frag, el.nextSibling);
				return el.nextSibling;
		}
	}
}

完整的代码示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>兼容浏览器的insertAdjacentHTML</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv='content-type' content='text/htm;charset=utf-8' />
 <style type="text/css">
* {margin:0; padding:0;}
body {background-color:#fff}
dl, dd {margin:20px;}

.color_1 {color:#F7941D; border:1px solid #F7941D;}
.color_2 {color:#f00; border:1px solid #f00;}
.color_3 {color:#01FE34; border:1px solid #01FE34;}
.color_4 {color:#F49AC1; border:1px solid #F49AC1;}
.color_5 {color:#00AEEF; border:1px solid #00AEEF;}
.color_6 {color:#DB00EF; border:1px solid #DB00EF;}
.color_7 {color:#00CCFD; border:1px solid #00CCFD;}
</style>
 </head>

 <body>
 <script type='text/javascript'>
 /**
 * 
 * 
 * @param {HTMLElement} el
 * @param {String} where beforeBegin、afterBegin、beforeEnd、afterEnd
 * @param {String} html
 */
function insertHTML(el, where, html) {
	if (!el) {
		return false;
	}
	
	where = where.toLowerCase();
	
	if (el.insertAdjacentHTML) {//IE
		el.insertAdjacentHTML(where, html);
	} else {
		var range = el.ownerDocument.createRange(),
			frag = null;
		
		switch (where) {
			case "beforebegin":
				range.setStartBefore(el);
				frag = range.createContextualFragment(html);
				el.parentNode.insertBefore(frag, el);
				return el.previousSibling;
			case "afterbegin":
				if (el.firstChild) {
					range.setStartBefore(el.firstChild);
					frag = range.createContextualFragment(html);
					el.insertBefore(frag, el.firstChild);
				} else {
					el.innerHTML = html;
				}
				return el.firstChild;
			case "beforeend":
				if (el.lastChild) {
					range.setStartAfter(el.lastChild);
					frag = range.createContextualFragment(html);
					el.appendChild(frag);
				} else {
					el.innerHTML = html;
				}
				return el.lastChild;
			case "afterend":
				range.setStartAfter(el);
				frag = range.createContextualFragment(html);
				el.parentNode.insertBefore(frag, el.nextSibling);
				return el.nextSibling;
		}
	}
}

function btnHandler() {
	var elem = document.getElementById('abc');
	
	insertHTML(elem, 'beforeBegin', '<dd class="color_2">上一个兄弟节点previousSibling</dd>');
	insertHTML(elem, 'beforeEnd', '<dd class="color_3">最后一个节点lastChild</dd>');
	insertHTML(elem, 'afterBegin', '<dd class="color_4">第一个节点firstChild</dd>');
	insertHTML(elem, 'afterEnd', '<dd class="color_5">下一个兄弟节点nextSibling</dd>');
}
</script>
<button onclick="btnHandler();">insertAdjacentHTML</button>
<dl class="color_1" id="abc">
	<dd><a href="#">今天采访出来,天上下雨,那个偏僻的地方根本没出租车的影子</a></dd>
	<dd><a href="#">今天采访出来,天上下雨,那个偏僻的地方根本没出租车的影子</a></dd>
	<dd><a href="#">今天采访出来,天上下雨,那个偏僻的地方根本没出租车的影子</a></dd>
	<dd><a href="#">今天采访出来,天上下雨,那个偏僻的地方根本没出租车的影子</a></dd>
	<dd><a href="#">今天采访出来,天上下雨,那个偏僻的地方根本没出租车的影子</a></dd>	
</dl>
 </body>
</html>

运行示例查看效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>兼容浏览器的insertAdjacentHTML</title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv='content-type' content='text/htm;charset=utf-8' /> <style type="text/css"> * {margin:0; padding:0;} body {background-color:#fff} dl, dd {margin:20px;} .color_1 {color:#F7941D; border:1px solid #F7941D;} .color_2 {color:#f00; border:1px solid #f00;} .color_3 {color:#01FE34; border:1px solid #01FE34;} .color_4 {color:#F49AC1; border:1px solid #F49AC1;} .color_5 {color:#00AEEF; border:1px solid #00AEEF;} .color_6 {color:#DB00EF; border:1px solid #DB00EF;} .color_7 {color:#00CCFD; border:1px solid #00CCFD;} </style> </head> <body> <button onclick="btnHandler();">insertAdjacentHTML</button> <dl class="color_1" id="abc"> <dd><a href="#">今天采访出来,天上下雨,那个偏僻的地方根本没出租车的影子</a></dd> <dd><a href="#">今天采访出来,天上下雨,那个偏僻的地方根本没出租车的影子</a></dd> <dd><a href="#">今天采访出来,天上下雨,那个偏僻的地方根本没出租车的影子</a></dd> <dd><a href="#">今天采访出来,天上下雨,那个偏僻的地方根本没出租车的影子</a></dd> <dd><a href="#">今天采访出来,天上下雨,那个偏僻的地方根本没出租车的影子</a></dd> </dl> </body> </html> 预览代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券