innerHTML 在 IE 中无法正常运行答案

【问题标题】：innerHTML doesn't function correctly in IEinnerHTML 在 IE 中无法正常运行
【发布时间】：2011-05-29 16:22:39
【问题描述】：

我正在尝试使用 innerHTML 填充 div，它在除 IE 之外的所有浏览器下都运行良好（特别是在 8 和 9 下进行测试）。我可以找到很多关于这个主题的信息，但没有简单的答案。如果我在文本中没有任何标签，它似乎有时会起作用，但从来没有。谁能帮我理解这个问题以及可能的解决方法？

<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>

【问题讨论】：

我知道。它在 IE 中不受支持。
错误Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; InfoPath.2) Timestamp: Sun, 29 May 2011 16:28:57 UTC Message: Object doesn't support this property or method Line: 11 Char: 6 Code: 0 URI: http://eatyourpet.info/ietest/index.php
不，这不是“不受支持的东西”。 innerHTML 是 IE 最先引入的一项功能。
但这也是我面临的错误......所以你能帮忙吗？
您不能在 P 标签内嵌套 H1 而不触发运行时错误。不过，您可以使用 SPAN 或其他内联元素。

标签： javascript internet-explorer innerhtml

【解决方案1】：

inner = document.getElementById("inner"); 出错 - 如果您将其更改为 var inner = document.getElementById("inner"); 它将起作用。

由于元素上的 id，IE 会自动创建一个全局 inner 变量 - 它似乎真的不喜欢你尝试为它分配东西。

【讨论】：

糟糕，我没注意到。我只是将文本放在
标记内，这实际上是真正的问题，问题又回来了。 ie不支持标签吗？

【解决方案2】：

按 F12 以获取脚本调试器并查看脚本错误。例如，与其尝试分配您希望的名为“inner”的新变量（它实际上映射到 ID 为“inner”的文档元素），不如考虑使用您实际声明的变量？

修复这些问题后，也许您想延迟脚本直到 OnLoad 触发？

【讨论】：

【解决方案3】：

首先您的 html 不完整。该页面没有标题 (<head>)。

第二，程序要精确，尽可能使用逗号和分号。代码中的变量声明后没有标点符号。这样的事情可能会破坏脚本。在这种情况下，window[inner]（由浏览器创建的内部变量）和您的“内部”变量之间存在冲突。缺少逗号/额外的 var 声明行混淆了 javascript 解释器，它试图在解释时插入分号。这种“分号插入”被视为 javascript 的主要缺陷之一（请参阅链接@bottom），但可以通过程序员的纪律来规避，以始终进行自己的分号插入。

更精确一点，您的脚本看起来像：

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

或

var txt = "Just a quick test!";
var inner = document.getElementById("inner");

将在 IE 中工作。

For further reading
For further reading (2)

【讨论】：

【解决方案4】：

尝试将 HTML 代码添加到带有 innerHTML 的 P 标记中时，IE 会崩溃。用DIV替换你的P标签来解决问题。

【讨论】：

标记内，这实际上是真正的问题，问题又回来了。 ie不支持标签吗？