Javascript .InnerHTML 在 Internet Explorer 中无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5243756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
.InnerHTML Not working properly in Internet Explorer
提问by Mayur
I wanted to assign a link tag to innerHTML of a HTML control. But this is not working properly in Internet Explorer. However when I try to assign anything other than <link>& <style>tags it works fine.
我想为 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>
Also, If I change sequence of <div>tag and <link>tag above it works fine in Internet Explorer also.
另外，如果我更改上面的<div>标签和<link>标签的顺序，它也可以在 Internet Explorer 中正常工作。
x.innerHTML='<div>abc</div><link \"http://test.com/css/template.css\" rel=\"stylesheet\">';
Please suggest! Thanks.
请建议！谢谢。
EDIT:This is a bug in Internet Explorer with ExtJs. More information at
编辑：这是带有 ExtJs 的 Internet Explorer 中的错误。更多信息请访问
http://www.sencha.com/forum/showthread.php?30110-internet-explorer-autoLoad-css-not-applied
http://www.sencha.com/forum/showthread.php?30110-internet-explorer-autoLoad-css-not-applied
回答by KooiInc
innerHTML won't work in IE, but using DOM methods it will:
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);
}
Although the referencestates a linktag may only appear in the header, interesting enough the style link doeswork if you use the code I provided, in all browsers I tried (IE, firefox, chrome). See this jsfiddle(where I used a real css-href from test.com ;-)
尽管参考说明link标签可能只出现在标题中，但有趣的是，如果您使用我提供的代码，在我尝试过的所有浏览器（IE、firefox、chrome）中，样式链接确实有效。看到这个 jsfiddle（我在那里使用了来自 test.com 的真正的 css-href ;-）
If you however want to place the linkin it's rightful section (<head>), use:
但是，如果您想将 放在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';
回答by selbie
For starters, you are missing an href attribute on your <link>.
首先，您的<link>.
<link href=\"http://test.com/css/template.css\" rel=\"stylesheet\" />
And don't put link and style tags into the <body>. Inject them into the <head>
并且不要将链接和样式标签放入<body>. 将它们注入<head>
var link = document.createElement("link");
link.href = "http://test.com/css/template.css";
link.rel = "StyleSheet";
document.head.appendChild(link);
回答by Vectorjohn
A lot of people are missing the point here. What he is trying to do ( after fixing the typo where the href attribute is missing ) works in any other browser.
很多人都忽略了这里的重点。他正在尝试做的事情（在修复缺少 href 属性的拼写错误之后）适用于任何其他浏览器。
IE 8 and below have a bug where if the first element in the text when setting innerHTML is a tag (maybe others), it is ignored. If you just put a space or newline or other tag first, it works.
IE 8 及更低版本有一个错误，如果设置innerHTML 时文本中的第一个元素是一个标签（可能是其他元素），它会被忽略。如果你只是先放一个空格或换行符或其他标签，它就可以工作。
He even discovered this when he said putting the <div>first fixes it.
当他说<div>先解决问题时，他甚至发现了这一点。
It isn't valid, but that's how you fix it.
它无效，但这就是您修复它的方式。
Edit: in other words: foo.innerHTML = "\n" + yourHtmlWithLinkInIt;
编辑：换句话说： foo.innerHTML = "\n" + yourHtmlWithLinkInIt;
回答by Ivan Ivani?
<link>can only be contained in <head>.
<link>只能包含在<head>.
This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times.
该元素定义了一个链接。与 A 不同，它可能只出现在文档的 HEAD 部分，尽管它可能出现多次。
reference: http://www.w3.org/TR/html401/struct/links.html#edef-LINK
参考：http: //www.w3.org/TR/html401/struct/links.html#edef-LINK
回答by oezi
i think the problem is that the <link>hast to be an empty element. change your code to this:
我认为问题是<link>必须是一个空元素。将您的代码更改为：
x.innerHTML='<link \"http://test.com/css/template.css\" rel=\"stylesheet\" /><div>abc</div>';
// this is the trick ^^^
EDIT:i havn't tested this, but it's the first thing that hurts my eyes.
编辑：我没有测试过这个，但这是第一个伤害我眼睛的东西。
EDIT2:<link>tags should only occur inside of the <head>-section... i hope you know what you're trying to do.
EDIT2：<link>标签应该只出现在<head>-section 内......我希望你知道你在做什么。
回答by oezi
to the set text properly, i would recommend you to go what i generally do. if you have ie 8 then open the html in ie. press f12 to show the developer tool. now in the new window go to script tag. set break point from where your javascript starts. now press on the button start debugging. execute the js function from your by some event or the way it executes. now on the object in the javascripg function, when the break point hits, right click and add watch. expand the object and see, where your earlier text was and where is your new text.
正确设置文本，我会建议你去我通常做的事情。如果您有 ie 8，则在 ie 中打开 html。按 f12 显示开发人员工具。现在在新窗口中转到脚本标记。从 javascript 开始的位置设置断点。现在按下按钮开始调试。通过某些事件或它的执行方式从您的 js 函数中执行。现在在 javascripg 函数中的对象上，当断点命中时，右键单击并添加监视。展开对象并查看您之前的文本在哪里以及您的新文本在哪里。
回答by suresh
Found different and easy solution here for "link" and "sytle", but "script" needs to be added using appendChild. Very much similar to what Vectorjohn has said, also provides more references.
在这里为“链接”和“样式”找到了不同且简单的解决方案，但需要使用 appendChild 添加“脚本”。与 Vectorjohn 所说的非常相似，也提供了更多参考。
http://allofetechnical.wordpress.com/2010/05/21/ies-innerhtml-method-with-script-and-style-tags/
http://allofetechnical.wordpress.com/2010/05/21/ies-innerhtml-method-with-script-and-style-tags/
回答by Kishan Parmar
try
尝试
document.getElementById('tblList').outerHTML="ypur html";
回答by mrdnk
What exactly are you trying to achieve, as your end goal? As said previously a link tag should really only appear in the <head>of an html document.
作为您的最终目标，您究竟想实现什么？如前所述，链接标签应该只出现在<head>html 文档中。
JavaScript can be a tricky thing in its vanilla flavour, you're better off using a framework, my personal favourite is MooToolsthough I hear JQuery is pretty good, but MooTools has OOP (for real programmers - tehe).
JavaScript 在其香草风味中可能是一件棘手的事情，你最好使用框架，我个人最喜欢的是MooTools，虽然我听说 JQuery 非常好，但 MooTools 有 OOP（对于真正的程序员 - tehe）。
This'll allow you to do a lot more, and probably get to your end goal, if you let me / us know then you should get a more direct answer to your issue.
这将使您做更多的事情，并且可能会达到您的最终目标，如果您让我/我们知道，那么您应该会得到更直接的问题的答案。
回答by Stefan Steiger
The thing is it works in FireFox and Google Chrome, but not in IE.
问题是它适用于 FireFox 和 Google Chrome，但不适用于 IE。
This is, because you cannot set the innerHTML tag of InternetExplorer with a string, if the string is more than text, ie a HTML element.
这是因为你不能用字符串设置InternetExplorer 的innerHTML 标签，如果字符串多于文本，即一个HTML 元素。
I experienced this trying to dynamically populate a ComboBox into a table cell with AJAX...
我在尝试使用 AJAX 将 ComboBox 动态填充到表格单元格中时遇到了这种情况...
The solution is to use JQuery.
Then you can do:$("#YourElementID").html('<link \"http://test.com/css/template.css\" rel=\"stylesheet\" /> <div>abc</div>');
and JQuery will do the DOM stuff, that selbie and KooiInc describe, for you.
解决方案是使用JQuery。
然后你可以这样做：$("#YourElementID").html('<link \"http://test.com/css/template.css\" rel=\"stylesheet\" /> <div>abc</div>');
JQuery 会为你做 DOM 的事情，这就是 selbie 和 KooiInc 所描述的。
