.InnerHTML 在 Internet Explorer 中无法正常工作答案

【问题标题】：.InnerHTML Not working properly in Internet Explorer.InnerHTML 在 Internet Explorer 中无法正常工作
【发布时间】：2011-07-11 18:06:03
【问题描述】：

我想为 HTML 控件的 innerHTML 分配一个链接标记。但这在 Internet Explorer 中无法正常工作。但是，当我尝试分配除 <link> 和 <style> 之外的任何标签时，它工作正常。

<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader");
  x.innerHTML='<link \"http://test.com/css/template.css\" rel=\"stylesheet\"><div>abc</div>';
  alert(x.innerHTML);
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">Click me!</h1>

</body>
</html>

另外，如果我更改上面<div> 标记和<link> 标记的顺序，它在Internet Explorer 中也可以正常工作。

x.innerHTML='<div>abc</div><link \"http://test.com/css/template.css\" rel=\"stylesheet\">';

请推荐！谢谢。

编辑： 这是带有 ExtJs 的 Internet Explorer 中的一个错误。更多信息在

http://www.sencha.com/forum/showthread.php?30110-internet-explorer-autoLoad-css-not-applied

【问题讨论】：

你真正想要完成什么？给出准确完成的 html 示例，当一切都成功完成后，它应该是什么样子。您试图将插入到 html 文档的正文中是为了什么目的？你想要内联 css，还是内联

标签： javascript html string internet-explorer innerhtml

【解决方案1】：

innerHTML 在 IE 中不起作用，但使用 DOM 方法可以：

function getValue()
{
  var x=document.getElementById("myHeader")
    , link = document.createElement('link')
    , div = document.createElement('div');
  x.innerHTML = '';
  x.appendChild(link);
  x.appendChild(div);
  div.innerHTML = 'abc';
  link.href = 'http://test.com/css/template.css';
  link.rel = 'stylesheet';
  alert(x.innerHTML);
}

虽然reference 声明link 标记可能只出现在标题中，但有趣的是，如果您使用我提供的代码，样式链接确实工作，在我尝试过的所有浏览器中（IE ，火狐，铬）。请参阅this jsfiddle（我使用了来自 test.com 的真实 css-href ;-)

但是，如果您想将 link 放在正确的部分 (<head>)，请使用：

var header = document.getElementsByTagName('head')[0];
  , link = document.createElement('link');
header.appendChild(link);
link.href = 'http://test.com/css/template.css';
link.rel = 'stylesheet';

【讨论】：

【解决方案2】：

对于初学者，您的<link> 缺少 href 属性。

<link href=\"http://test.com/css/template.css\" rel=\"stylesheet\" />

并且不要将链接和样式标签放入<body>。将它们注入<head>

  var link = document.createElement("link");
  link.href = "http://test.com/css/template.css";
  link.rel = "StyleSheet";
  document.head.appendChild(link);

【讨论】：

糟糕！抱歉..缺少 href 是一个错字..实际上我得到了一个 HTML 作为字符串，其中包含链接和其他 HTML。仅为 IE 注入链接会增加开销。
话虽如此，创建一个屏幕外 div 元素并在其上设置 .innerHTML 属性。然后 setTimeout(callback,1) 让元素得到实现。在回调函数中，提取 div 的所有子项。在 document.head 或正文中的
标记内重新设置元素。酌情使用 removeChild 和 appendChild 方法。

【解决方案3】：

很多人都忽略了这一点。他正在尝试做的事情（在修复缺少 href 属性的错字之后）在任何其他浏览器中都可以工作。

IE 8 及以下版本有一个错误，如果在设置 innerHTML 时文本中的第一个元素是一个标签（可能是其他标签），它会被忽略。如果你只是先放一个空格或换行符或其他标签，它就可以工作。

当他说先将<div> 修复它时，他甚至发现了这一点。

这是无效的，但这就是你修复它的方法。

编辑：换句话说：foo.innerHTML = "\n" + yourHtmlWithLinkInIt;

【讨论】：

【解决方案4】：

<link>只能包含在<head>中。

这个元素定义了一个链接。与 A 不同，它可能只出现在 HEAD 部分一个文件，虽然它可能会出现任意次数。

参考：http://www.w3.org/TR/html401/struct/links.html#edef-LINK

【讨论】：

<link> 不是超链接。
不开玩笑？您从我的回答中不明白什么？先生，你好；）
关于样式表的问题，您建议使用。谁在开玩笑？

【解决方案5】：

我认为问题在于<link> 必须是一个空元素。将您的代码更改为：

x.innerHTML='<link \"http://test.com/css/template.css\" rel=\"stylesheet\" /><div>abc</div>';
                                                     // this is the trick ^^^

编辑：我没有测试过这个，但这是第一个伤害我眼睛的东西。

EDIT2： <link> 标签只能出现在 <head>-section 内...我希望你知道你在做什么。

【讨论】：

关闭样式标签没有帮助:(
尾随/“自闭”斜线仅对XHTML语法是必需的，在使用innerHTML时绝对不相关；在 HTML 语法中，它既没有必要也不可取。

【解决方案6】：

正确设置文本，我建议您按照我通常做的事情去做。如果你有 ie 8 然后在 ie 中打开 html。按 f12 显示开发者工具。现在在新窗口中转到脚本标签。从您的 javascript 开始的位置设置断点。现在按下按钮开始调试。通过某些事件或其执行方式从您的 js 函数中执行。现在在 javascripg 函数中的对象上，当断点命中时，右键单击并添加监视。展开对象并查看您之前的文本在哪里以及您的新文本在哪里。

【讨论】：

【解决方案7】：

作为您的最终目标，您到底想实现什么？如前所述，链接标签实际上应该只出现在 html 文档的<head> 中。

JavaScript 在它的香草风味中可能是一件棘手的事情，你最好使用一个框架，我个人最喜欢的是 MooTools 虽然我听说 JQuery 相当不错，但 MooTools 有 OOP（对于真正的程序员 - tehe）。

这将使您做更多事情，并可能达到您的最终目标，如果您让我/我们知道，那么您应该得到更直接的答案来解决您的问题。

【讨论】：

【解决方案8】：

问题是它适用于 FireFox 和 Google Chrome，但不适用于 IE。

这是因为不能用字符串设置InternetExplorer的innerHTML标签，如果字符串多于文本，即HTML元素。

我在尝试使用 AJAX 将 ComboBox 动态填充到表格单元格中时遇到过这种情况...

解决方案是使用 JQuery。
然后你可以这样做：
$("#YourElementID").html('<link \"http://test.com/css/template.css\" rel=\"stylesheet\" /> <div>abc</div>');
JQuery 将为您完成 selbie 和 KooiInc 所描述的 DOM 工作。

【讨论】：

【解决方案9】：

在此处为“link”和“sytle”找到了不同且简单的解决方案，但需要使用 appendChild 添加“script”。和 Vectorjohn 说的很像，也提供了更多的参考。

http://allofetechnical.wordpress.com/2010/05/21/ies-innerhtml-method-with-script-and-style-tags/

【讨论】：

【解决方案10】：

试试

document.getElementById('tblList').outerHTML="ypur html";

【讨论】：

标记内重新设置元素。酌情使用 removeChild 和 appendChild 方法。