兼容浏览器的insertAdjacentHTML
时间：2010-10-14 来源：meteoric_cry
参数资料：
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的起始位置的设置，参数setStartBefore、setStartAfter
下面就是完整的代码了（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>
运行示例查看效果：
兼容浏览器的insertAdjacentHTML insertAdjacentHTML 今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子 今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子 今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子 今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子 今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子 预览代码 相关阅读 更多 +
