在 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代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
function insertHtml(where, el, html){ where = where.toLowerCase(); if(el.insertAdjacentHTML){ switch(where){ case "beforebegin": el.insertAdjacentHTML('BeforeBegin', html); return el.previousSibling; case "afterbegin": el.insertAdjacentHTML('AfterBegin', html); return el.firstChild; case "beforeend": el.insertAdjacentHTML('BeforeEnd', html); return el.lastChild; case "afterend": el.insertAdjacentHTML('AfterEnd', html); return el.nextSibling; } throw 'Illegal insertion point -> "' + where + '"'; } var range = el.ownerDocument.createRange(); var frag; 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); return 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); return el.lastChild; }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; } throw 'Illegal insertion point -> "' + where + '"'; } |
测试代码：
|
1 2 3 4 5 6 7 |
<select id="where"> <option value="BeforeBegin">BeforeBegin</option> <option value="AfterBegin">AfterBegin</option> <option value="BeforeEnd">BeforeEnd</option> <option value="AfterEnd">AfterEnd</option> </select><br> <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 Blog
[版权声明] 
本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。