将 HTML 字符串动态插入到文档的 HEAD 中答案

【问题标题】：Dynamically insert an HTML string into the HEAD of a Document将 HTML 字符串动态插入到文档的 HEAD 中
【发布时间】：2010-10-23 21:49:52
【问题描述】：

我需要在当前文档 DOM 的 <head> 标签中插入一个 HTML 字符串，一种方法是：创建一个 div 元素，填充其 innerHTML，逐项复制到您的 <head> 元素中。但是这些方法在 IE/Opera 中不起作用，原因如下，尽管在 FF3 中两种都可以完美运行，并且浏览器会处理添加的 STYLE/SCRIPT 元素。

有没有其他方法可以将字符串直接插入<head> 并处理这些项目？

（为什么他们在 IE/Opera 中失败）

方法 1 - 失败，因为 innerHTML 无法解析/忽略字符串中的 META、STYLE、SCRIPT 元素

insertHtml = function(parentElem,htmlStr){

   var frag = document.createDocumentFragment();
   var temp = document.createElement('div');
   temp.innerHTML = htmlStr;

   // at this point, temp.childNodes.length=0

   while (temp.firstChild) {
       frag.appendChild(temp.firstChild);
   }
   // use native DOM methods to insert the fragment
   parentElem.insertBefore(frag, parentElem.childNodes[0]);
}

方法 2 - 失败，因为添加的 STYLE/SCRIPT 元素不会被浏览器处理

 document.getElementsByTagName("head")[0].innerHTML = htmlStr
 // although this populates the <head> tag successfully

【问题讨论】：

如果你使用你的第一个函数但是将'div'改为'head'呢？
那么 IE/Opera 在 innerHTML 赋值后就崩溃了。显然你不能 createElement('head') !!

标签： javascript html dom

【解决方案1】：

这是一个解决问题的愚蠢技巧。在 htmlStr 中添加一个非空字符串标签（node.nodeType === 3），一切都会正常工作：

var insertHtml = function(parentElem, htmlStr){

   var frag = document.createDocumentFragment();
   var temp = document.createElement('div');
   temp.innerHTML = "hack" + htmlStr;

   while (temp.firstChild) {
       if (temp.firstChild.nodeType === 1) {
            // add only element nodes
            frag.appendChild(temp.firstChild);
       } else {
            // remove the hack string
            temp.removeChild(temp.firstChild);
       }
   }

   parentElem.insertBefore(frag, parentElem.childNodes[0]);
}

【讨论】：

它可以工作，但添加的 STYLE/SCRIPT 元素仍然无法被 IE7 处理，尽管 Opera9 / FF3 / Safari4 工作正常。
我在 IE6 中测试过，它工作正常。等我回家用 IE8 和 IE7 模式下的 IE8 时，我会尝试看看我是否也可以解决这些问题。
我在上述设置中进行了测试，似乎可以正常工作。我没有要测试的纯 IE7 安装。
那太好了，因为我使用的代码与您自己的代码非常相似，所以希望它可以在生产环境中工作:)