创建样式节点、添加innerHTML、添加到DOM、以及IE令人头疼的问题

我有一个由两部分组成的问题。

一、场景：

由于我们在移动浏览器对 NOSCRIPT 的支持方面遇到了一些奇怪的问题，我的任务是提出一种替代解决方案来“检测”JS。解决方案逻辑是页面上有两个 DIV。一种是错误提示你没有 JS，并且默认显示他。如果有 JS，我们需要向 HEAD 添加一个新的 STYLE 块，该块会覆盖之前的 CSS 并隐藏错误并显示内容。

示例 HTML：

<div id="div1">div 1 (should be shown if JS enabled)</div>
<div id="div2">div 2 (should be hidden if JS enabled)</div>

这是我开始的 JS：

  var styleNode = document.createElement('style');
  styleNode.setAttribute("type", "text/css");
  styleNode.innerHTML = "#div1 {display: block;} #div2 {display: none;}";
  headTag.appendChild(styleNode);

但是，我遇到了问题。如果您尝试将innerHTML插入到创建的元素中，然后将其放入DOM中，则一些谷歌搜索会导致IE可能遇到的安全问题的描述：

http://karma.nucleuscms.org/item/101 http://karma.nucleuscms.org/item/101

因此，我将脚本修改如下：

  var styleNode = document.createElement('style');
  styleNode.setAttribute("type", "text/css");
  var headTag = document.getElementsByTagName("head")[0];
  headTag.appendChild(styleNode);
  var aStyleTags = headTag.getElementsByTagName("style");
  var justAddedStyleTag = aStyleTags[aStyleTags.length-1];
  justAddedStyleTag.innerHTML = "#div1 {display: block;} #div2 {display: none;}";

问题1：这是解决 IE 问题的有效方法吗？有更有效的解决方案吗？

问题2: 即使进行了调整，该脚本在 IE 中仍然无法运行。它在 Firefox 中工作正常，但在 IE 7 中我收到“未知运行时错误”。

我在 JSBIN 上有此代码的示例：

http://jsbin.com/ucesi4/4 http://jsbin.com/ucesi4/4

有谁知道IE是怎么回事吗？

UPDATE:

我通过谷歌偶然发现了这个链接。注意最后一条评论：

http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

也就是说，你真的应该把所有 HEAD 中的样式规则严格 符合 XHTML。这样做可以 也有点棘手，因为你 无法使用innerHTML注入 直接使用 HEAD 或 STYLE 元素。 （这两个标签都是只读的。）

哎呀！真的？ FireFox 是否过于宽容？或者这只是一个非常奇怪的 IE 怪癖？

更新2：

关于我们在这里试图解决的问题的更多背景知识。我们正在处理移动设备和一些过时的设备 a) 不支持 NOSCRIPT b) 具有缓慢的 JS 引擎。

由于他们不支持 NOSCRIPT，我们默认显示错误，然后通过 JS 隐藏它（如果有），并向他们提供正确的内容。由于这些 JS 引擎速度较慢，人们会看到 DIV 显示/隐藏的“闪烁”。这是解决这个问题的建议解决方案，因为它会在 DIV 渲染之前加载 CSS。

由于它似乎无效，解决方案是在这些旧设备上，我们将使用此方法（因为它似乎有效，即使不在 IE 中），然后所有其他正确的浏览器将按照建议执行...我们在每个 DIV 加载到 DOM 中后，将通过内联 JS 更新 DISPLAY CSS 属性。

尽管如此，我仍然很好奇这个问题是否是 IE 的错误，或者 IE 是否实际上通过将 STYLE 设为只读元素来遵守正确的标准。

在 IE 中你可以使用style.styleSheet.cssText:

var style = document.createElement('style');
style.type = 'text/css';

if (style.styleSheet) { // IE
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

在这里试试这个：http://jsfiddle.net/QqF77/ http://jsfiddle.net/QqF77/

请参阅这个问题的答案：如何使用 Javascript 创建 标签 https://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript