创建兼容 IE/FireFox 的 insertAdjacentHTML 方法

Jul 8, 2009 --- · 2 min read · javascript ExtJs ·

Share on:

在 IE 中我们可以用 insertAdjacentHTML 往元素的 beforeBegin,beforeEnd,afterBegin,afterEnd 处理插入新元素。而在非 IE 中没有该方法，因而我们要创造一个兼容的 insertHtml 方法来。

本方法从 Ext 2 中剥离出来的，在 ext-all-debug.js 中有以下方法：

Ext.DomHelper.insertHtml( String where, HTMLElement el, String html ) : HTMLElement

参数介绍：

where：插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。
el：用于参照插入位置的html元素对象
html：要插入的html代码

 1function insertHtml(where, el, html){
 2
 3    where = where.toLowerCase();
 4    if(el.insertAdjacentHTML){
 5
 6        switch(where){
 7            case "beforebegin":
 8                el.insertAdjacentHTML('BeforeBegin', html);
 9                return el.previousSibling;
10            case "afterbegin":
11                el.insertAdjacentHTML('AfterBegin', html);
12                return el.firstChild;
13            case "beforeend":
14                el.insertAdjacentHTML('BeforeEnd', html);
15                return el.lastChild;
16            case "afterend":
17                el.insertAdjacentHTML('AfterEnd', html);
18                return el.nextSibling;
19        }
20        throw 'Illegal insertion point -&gt; "' + where + '"';
21    }
22
23    var range = el.ownerDocument.createRange();
24    var frag;
25    switch(where){
26         case "beforebegin":
27            range.setStartBefore(el);
28            frag = range.createContextualFragment(html);
29            el.parentNode.insertBefore(frag, el);
30            return el.previousSibling;
31         case "afterbegin":
32            if(el.firstChild){
33                range.setStartBefore(el.firstChild);
34                frag = range.createContextualFragment(html);
35                el.insertBefore(frag, el.firstChild);
36                return el.firstChild;
37             }else{
38                el.innerHTML = html;
39                return el.firstChild;
40             }
41        case "beforeend":
42            if(el.lastChild){
43                range.setStartAfter(el.lastChild);
44                frag = range.createContextualFragment(html);
45                el.appendChild(frag);
46                return el.lastChild;
47            }else{
48                el.innerHTML = html;
49                return el.lastChild;
50            }
51        case "afterend":
52            range.setStartAfter(el);
53            frag = range.createContextualFragment(html);
54            el.parentNode.insertBefore(frag, el.nextSibling);
55            return el.nextSibling;
56    }
57    throw 'Illegal insertion point -&gt; "' + where + '"';
58}

测试代码：

1<select id="where">
2    <option value="BeforeBegin">BeforeBegin</option>
3    <option value="AfterBegin">AfterBegin</option>
4    <option value="BeforeEnd">BeforeEnd</option>
5    <option value="AfterEnd">AfterEnd</option>
6</select><br>
7<button onclick="insertHtml(where.value,this,'<img src=/ciba.gif>')"><b>Click Here</b></button>

上面代码在 IE、FireFox 和 Chrome 浏览器上测试均通过。分别选择 BeforeBegin、AfterBegin、BeforeEnd 和 AfterEnd 点击 Click Here 按钮后的效果图如下：

另外 Ext.Element 和 Ext.Layer 的 insertHtml 也是调用的 Ext.DomHelper.insertHtml 方法的。且 Ext 在此之上衍生了 insertAfter/inserBefore/insertFirst/insertSibling 方法。

参考：1. http://www.koyoz.com/blog/?action=show&id=2

永久链接 https://yanbin.blog/ie-firefox-insertadjacenthtml/, 来自隔叶黄莺 Yanbin's Blog
[版权声明]

本文采用署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。