令人头疼的innerHTML

        今天写innerHTML的时候，发现当innerHTML中含有html标签的时候，IE会将html标签的字母变成大小写，并且将标签中的属性引号给去掉了。不但如此，而且html标签中多了一些莫名其妙的属性，程序在IE下整个就跑不起来。深入研究下，innerHTML自带了语法检查功能,他会自动把不完整的HTML代码补充完整。设置 innerHTML 的时候，插入的 HTML 代码中包含脚本，但这些脚本却不生效，或者在 IE 上生效在其它浏览器上就不生效。原因很简单：不同浏览器对插入 innerHTML 中的脚本有不同的处理方法。经过实践，归纳如下：
对于IE，首先 script 标签必须带 defer 属性，其次在插入时刻，innerHTML 的所属节点必须在 DOM 树中；对于 Firefox 和 Opera，在插入时刻，innerHTML 的所属节点不可以在 DOM 树中。
       怎么办呢？想到了innerText和outerHTML,它们与innerHTML的区别如下：
                             
                                
结果用outerHTML问题就解决了。但是，新的问题又来了，在firefox下不能用了。
结果只能分别定义IE和firefox：
      

1 var ua = navigator.userAgent.toLowerCase();
2                 if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0)
3                 {
4                     
5                 }
6                 else 
7                 {
8                     
9                 }

不过在网上看到有人提出了一个方法，可以借鉴。但是我没测试。
   

/**//*
 * 描述：跨浏览器的设置 innerHTML 方法
 * 允许插入的 HTML 代码中包含 script 和 style
 * 作者：kenxu <ken@ajaxwing.com>
 * 日期：2006-03-23
 * 参数：
 * el: 合法的 DOM 树中的节点
 * htmlCode: 合法的 HTML 代码
 * 经测试的浏览器：ie5+, firefox1.5+, opera8.5+
 */
var setInnerHTML = function (el, htmlCode) {
 var ua = navigator.userAgent.toLowerCase();
 if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) {
 htmlCode = '<div style="display:none">for IE</div>' + htmlCode;
 htmlCode = htmlCode.replace(/<script([^>]*)>/gi,
 '<script$1 defer="true">');
 el.innerHTML = htmlCode;
 el.removeChild(el.firstChild);
 }
 else {
 var el_next = el.nextSibling;
 var el_parent = el.parentNode;
 el_parent.removeChild(el);
 el.innerHTML = htmlCode;
 if (el_next) {
 el_parent.insertBefore(el, el_next)
 } else {
 el_parent.appendChild(el);
 }
 }