兼容浏览器的insertAdjacentHTML

来源：互联网发布：环氧丙烷价格30日数据编辑：程序博客网时间：2024/06/06 07:21

添加HTML内容与文本内容以前用的是innerHTML与innerText方法，

最近发现还有insertAdjacentHTML和 insertAdjacentText方法，

这两个方法更灵活，可以在指定的地方插入html内容和文本内容。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

参数资料：

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）：

完整的代码示例：

<!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>

<转载自：http://www.cnblogs.com/meteoric_cry/archive/2010/10/14/1851093.html>

0 0