Question

 <html>
 <head>
 <script type="text/javascript">
 document.getElementById("eee").innerHTML = "7777";
 </script>


 </head>
 <body>
 <p id="eee">aa</p>

 </body>
 </html>

为什么innerHTML在头部不起作用，但它在身体中起作用？请原谅初学者的问题，但上次我一年前使用过javascript这根本不是问题。

Answer 1

您需要确保文档已加载。

检查此question的答案。

Answer 2

在dom准备好之前，javascript正在运行。使用事件DOMContentLoaded以在标头中执行此操作。对于旧版浏览器，您应该使用onload事件。

http://jsfiddle.net/r7VYz/1/

 <html>
 <head>
 <script type="text/javascript">
 document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("eee").innerHTML = "7777"; 
 }, false);

 </script>


 </head>
 <body>
 <p id="eee">aa</p>

 </body>
 </html>

Answer 3

您需要等待HTML文档加载才能被操作。

<script type="text/javascript">
  window.onload = function() {
    document.getElementById("eee").innerHTML = "7777";
  };
</script>

请记住，脚本按照HTML文档中列出的顺序进行评估，因此在浏览器处理“head”部分时会运行脚本。由于浏览器尚未解析“body”部分，因此它不知道ID为“eee”的任何元素。

但是，通过为“window.onload”事件分配一个函数，可以延迟执行内部HTML分配，直到窗口完全加载所有资源并安全地操作文档。

请注意，如果您的脚本位于正文部分，则在列出ID为“eee”的元素之后，该脚本将无需等待窗口“加载”事件即可运行。

Answer 4

因为你的脚本无法找到该元素。首先加载头中的脚本，当DOM已正确加载或仍在加载时。

<p id="eee">aa</p>
<!-- Use the script after the element, so that the script can find it -->
<script type="text/javascript">
 document.getElementById("eee").innerHTML = "7777";
</script>

其他方法可能正在窗口的onload事件上执行脚本

window.onload = function() {
    document.getElementById("eee").innerHTML = "7777";
};

Answer 5

你想要更像这样的东西。您必须等待整个文档加载，然后才能保证对其进行修改。如下所示

 <html>
<head>
 <script type="text/javascript">
    window.onload = function() {document.getElementById("eee").innerHTML = "7777";};
 </script>
 </head>
 <body>
 <p id="eee">aa</p>
 </body>
 </html>

这是工作jsfiddle

在html头部的javascript，innerhtml无法正常工作？

5 个答案: