Question

我想为HTML控件的innerHTML分配链接标记。但这在Internet Explorer中无法正常工作。但是当我尝试分配<link>＆amp;以外的任何内容时<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

Answer 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，firefox，chrome）。请参阅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';

Answer 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);

Answer 3

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

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

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

它无效，但这就是你解决它的方法。

修改：换句话说：foo.innerHTML = "\n" + yourHtmlWithLinkInIt;

Answer 4

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

中

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

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

Answer 5

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

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

编辑：我没有对此进行测试，但这是第一件伤害我眼睛的事情。

EDIT2： <link>标记只应出现在<head>部分内...我希望您知道自己要做什么。

Answer 6

正确设置文本，我建议你去我一般做的。如果你有ie 8然后在ie中打开html。按f12显示开发人员工具。现在在新窗口中转到脚本标记。设置javascript开始的断点。现在按下按钮开始调试。通过某些事件或执行方式执行js函数。现在在javascripg函数中的对象上，当断点点击时，右键单击并添加watch。展开对象并查看您的早期文本所在的位置以及新文本的位置。

Answer 7

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

JavaScript可能是一个棘手的东西，它的香草味道，你最好使用一个框架，我个人最喜欢的是MooTools虽然我听说JQuery非常好，但MooTools有OOP（对于真正的程序员 - tehe ）。

这将允许你做更多事情，并可能达到你的最终目标，如果你让我/我们知道你应该得到一个更直接的答案你的问题。

Answer 8

事情是它适用于FireFox和谷歌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描述。

Answer 9

这里为“link”和“sytle”找到了不同的简单解决方案，但需要使用appendChild添加“script”。与Vectorjohn所说的非常类似，也提供了更多的参考资料。

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

Answer 10

试

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

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

10 个答案: