innerHTML 在 IE 中无法正确显示 function
[英]innerHTML doesn't function correctly in IE
问题描述
I am trying to populate a div using innerHTML, which works fantastically under all browsers except IE (specifically being tested under 8 and 9).
我正在尝试使用 innerHTML 填充一个 div，它在除 IE 之外的所有浏览器下都运行良好（特别是在 8 和 9 下进行测试）。 I can find lots of information on this topic, but no simple answers.我可以找到很多关于这个主题的信息，但没有简单的答案。 It seems to sometimes work if I don't have any tags in the text, but never with.如果我在文本中没有任何标签，它似乎有时会起作用，但从来没有。 Can anyone help me understand the problem, and potential workarounds for this?谁能帮我理解这个问题，以及潜在的解决方法？
<html>
<body>
The following box should contain text populated with innerHTML,
but doesn't in IE
<p id="inner" style="width:250px; height: 100px; margin: 20px auto; background-color: #fff; border:5px solid orange; padding:7px; text-align:left; }"></p>
<script type="text/javascript">
var txt = "<h1>Just a quick test!</h1>"
var inner = document.getElementById("inner");
inner.innerHTML=txt;
</script>
</body>
</html>
4 个解决方案
解决方案1
3 2011-05-29 16:33:11
It's erroring on inner = document.getElementById("inner"); inner = document.getElementById("inner");出错了- if you change this to var inner = document.getElementById("inner"); - 如果您将其更改为var inner = document.getElementById("inner"); it will work.它会起作用的。
IE is automatically creating a global inner variable due to the id on the element - it really doesn't seem to like you trying to assign things to it.由于元素上的 id，IE 会自动创建一个全局inner变量——它似乎真的不喜欢你试图给它分配东西。
解决方案2
1 2011-05-29 16:26:53
Hit F12 to get the script debugger and review the script errors.按 F12 获取脚本调试器并查看脚本错误。 For instance, rather than trying to assign what you hoped is a new variable named "inner" (which actually maps to the document's element with ID "inner") you might consider using a variable you've actually declared?例如，与其尝试分配您希望的名为“inner”的新变量（它实际上映射到 ID 为“inner”的文档元素），不如考虑使用您实际声明的变量？
After you fix those, perhaps you want to delay your script until OnLoad fires?在你修复这些之后，也许你想延迟你的脚本直到 OnLoad 触发？
解决方案3
1 2011-05-29 16:36:56
First your html is not complete.首先你的 html 不完整。 The page has no header ( <head> ).该页面没有 header ( <head> )。
Second, program precise, using comma's and semicolons everywhere you can.其次，程序要精确，尽可能使用逗号和分号。 There was no punctuation after the variable declaration in your code.代码中的变量声明后没有标点符号。 Things like that can break the script.这样的事情可能会破坏脚本。 In this case there is a conflict between window[inner] (an internal variable created by the browser) and your 'inner' variable.在这种情况下， window[inner] （由浏览器创建的内部变量）和您的“内部”变量之间存在冲突。 The lack of a comma/extra var declaration line confused the javascript interpreter, that tried to insert semicolons whilst interpreting.缺少逗号/额外的 var 声明行混淆了 javascript 解释器，它试图在解释时插入分号。 This 'semicolon insertion' is seen as one of the major flaws of javascript (see links @bottom), but can be circumvented with programmers discipline to always do his own semicolon insertion.这种“分号插入”被视为 javascript 的主要缺陷之一（请参阅链接@bottom），但可以通过程序员的纪律来规避，始终进行自己的分号插入。
With a little more precision your script looks like:更精确一点，您的脚本看起来像：
var txt = "Just a quick test!", //use a comma here
inner = document.getElementById("inner");
//use a semicolon to end var declaration block
inner.innerHTML = txt; //always end statements with semicolon
or或者
var txt = "Just a quick test!";
var inner = document.getElementById("inner");
That will work in IE.这将在 IE 中工作。
解决方案4
0 2011-12-22 07:29:01
IE bombs out when trying to add HTML code into a P tag with innerHTML.尝试将 HTML 代码添加到带有 innerHTML 的 P 标记中时，IE 会崩溃。 Replace your P tags with DIVs to solve the problem.用 DIV 替换您的 P 标签以解决问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.