Question

我正在尝试使用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>

Answer 1

inner = document.getElementById("inner");上的错误 - 如果您将其更改为var inner = document.getElementById("inner");则会有效。

由于元素上的id，IE会自动创建一个全局inner变量 - 它似乎并不像您尝试为其分配内容。

Answer 2

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

修复后，或许你想延迟脚本直到OnLoad触发？

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

Answer 4

IE尝试使用innerHTML将HTML代码添加到P标记时爆炸。用DIV替换P标签以解决问题。

innerHTML在IE中无法正常运行

4 个答案: