.InnerHTML在Internet Explorer中无法正常工作
[英].InnerHTML Not working properly in Internet Explorer
问题描述
I wanted to assign a link tag to innerHTML of a HTML control. 
我想为HTML控件的innerHTML分配一个链接标记。 But this is not working properly in Internet Explorer. 但这在Internet Explorer中无法正常工作。 However when I try to assign anything other than <link> & <style> tags it works fine. 但是当我尝试分配<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. 编辑：这是Internet Explorer与ExtJs的错误。 More information at 更多信息在
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
10 个解决方案
解决方案1
11 2011-03-24 11:59:04
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 reference states a link tag may only appear in the header, interesting enough the style link does work if you use the code I provided, in all browsers I tried (IE, firefox, chrome). 虽然引用声明link标记可能只出现在标题中，但是如果你使用我提供的代码，在我尝试的所有浏览器（IE，firefox，chrome）中，样式链接确实有用。 See this jsfiddle (where I used a real css-href from test.com ;-) 看到这个jsfiddle （我在test.com上使用了一个真正的css-href ;-)
If you however want to place the link in 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';
解决方案2
8 2011-03-09 09:41:42
For starters, you are missing an href attribute on your <link> . 对于初学者，您在<link>上缺少href属性。
<link href=\"http://test.com/css/template.css\" rel=\"stylesheet\" />
And don't put link and style tags into the <body> . 并且不要将链接和样式标记放入<body> 。 Inject them into the <head> 将它们注入<head>
var link = document.createElement("link");
link.href = "http://test.com/css/template.css";
link.rel = "StyleSheet";
document.head.appendChild(link);
解决方案3
3 2011-08-04 23:14:40
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. IE 8及以下版本有一个错误，如果设置innerHTML时文本中的第一个元素是标记（可能是其他元素），则会被忽略。 If you just put a space or newline or other tag first, it works. 如果你只是先放置一个空格或换行符或其他标签，它就可以了。
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 ;
解决方案4
2 2011-03-09 09:37:59
<link> can only be contained in <head> . <link>只能包含在<head> 。
This element defines a link.
reference: http://www.w3.org/TR/html401/struct/links.html#edef-LINK 参考： http ： //www.w3.org/TR/html401/struct/links.html#edef-LINK
解决方案5
1 2011-03-09 09:37:25
i think the problem is that the <link> hast to be an empty element. 我认为问题是<link>是一个空元素。 change your code to this: 将您的代码更改为：
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 ...我希望你知道你想要做什么。
解决方案6
1
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. 如果你有ie 8然后在ie中打开html。 press f12 to show the developer tool. 按f12显示开发人员工具。 now in the new window go to script tag. 现在在新窗口中转到脚本标记。 set break point from where your javascript starts. 设置javascript开始的断点。 now press on the button start debugging. 现在按下按钮开始调试。 execute the js function from your by some event or the way it executes. 通过某些事件或执行方式执行js函数。 now on the object in the javascripg function, when the break point hits, right click and add watch. 现在在javascripg函数中的对象上，当断点点击时，右键单击并添加watch。 expand the object and see, where your earlier text was and where is your new text. 展开对象并查看您的早期文本所在的位置以及新文本的位置。
解决方案7
0 2013-10-19 13:09:24
尝试
document.getElementById('tblList').outerHTML="ypur html";
解决方案8
0 2011-03-25 23:57:34
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. 如前所述，链接标记应该只出现在html文档的<head>中。
JavaScript can be a tricky thing in its vanilla flavour, you're better off using a framework, my personal favourite is MooTools though 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. 这将允许你做更多，并可能达到你的最终目标，如果你让我/我们知道你应该得到一个更直接的答案你的问题。
解决方案9
0 2011-03-26 13:34:44
The thing is it works in FireFox and Google Chrome, but not in IE. 事情是它适用于FireFox和谷歌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. 这是因为如果字符串不仅仅是文本，即HTML元素，则无法使用字符串设置InternetExplorer的innerHTML标记。
I experienced this trying to dynamically populate a ComboBox into a table cell with AJAX... 我经历过尝试使用AJAX将ComboBox动态填充到表格单元格中...
The solution is to use JQuery. 解决方案是使用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将做的东西，selbie和KooiInc描述，为你。
解决方案10
0 2012-02-07 10:58:22
Found different and easy solution here for "link" and "sytle", but "script" needs to be added using appendChild. 在这里为“link”和“sytle”找到了不同的简单解决方案，但是需要使用appendChild添加“script”。 Very much similar to what Vectorjohn has said, also provides more references. 与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/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.