跨浏览器的设置innerHTML方法，支持插入代码中包含script、style标签

最新推荐文章于 2021-06-29 01:08:55 发布

原创最新推荐文章于 2021-06-29 01:08:55 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #opera #firefox #html #function #测试

JavaScript技术专栏收录该内容

23 篇文章

订阅专栏

跨浏览器的设置innerHTML方法，支持插入代码中包含script、style标签

Mar 23, 02:45 PM by kenxu

很多人在使用 innerHTML 插入代码的时候都会遇到这样一个问题：代码中包含的 script 不能运行。andot 的 让插入到 innerHTML 中的 script 跑起来 给出了一个很好的解决方案，考虑得很细致。这里给出另外一个更简单解决方案，充分利用了浏览器本身的特性。

/*
* 描述：跨浏览器的设置innerHTML方法。
*     允许插入的html代码中包含script和style。
*     经测试的浏览器：ie5+, firefox1.5+, opera8.5+。
* 作者：kenxu <ken@ajaxwing.com>
* 日期：2006-03-23
* 参数：
*     el: 合法的dom树中的节点。
*     htmlCode: 合法的html代码。代码中可包含script和style。
* 注意：el必须是dom树中的节点！！！
*/
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;
    el_next ? el_parent.insertBefore(el, el_next) : el_parent.appendChild(el);
  }
}