兼容FireFox/IE的insertAdjacentHTML方法

今日研读大名鼎鼎的Ext框架源码，开始以为他们的代码一定超复杂难懂，但读了一点才发现，代码写的非常清晰易懂，设计严谨巧妙，确实一帮牛人之作。

废话不多说，说说今日收获：今日读到insertHtml部分发现这个方法其实是实现了兼容FF的insertAdjacentHTML方法，仔细看看感觉挺不错，于是提取出来，便于今后使用。

方法名称：insertHtml(where,el,html)

参数介绍：

where：插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。

el：用于参照插入位置的html元素对象

html：要插入的html代码

源码如下：

<script type="text/javascript">

<!--

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 + '"';

}