我想为 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
最佳答案
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';
关于javascript - .InnerHTML 在 Internet Explorer 中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5243756/