码迷,mamicode.com
首页 > Web开发 > 详细

兼容浏览器的insertAdjacentHTML

时间:2014-09-01 15:53:33      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:浏览器   资料   而且   


添加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的起始位置的设置,参数setStartBeforesetStartAfter

 

下面就是完整的代码了(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>

兼容浏览器的insertAdjacentHTML

标签:浏览器   资料   而且   

原文地址:http://chandlerver5.blog.51cto.com/2845596/1547346

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!