方法1事件监听器

Question

<!DOCTYPE html>
<html>

<head>
    <script>
        document.getElementById("passage").innerHTML = "Paragraph changed!";
    </script>
</head>

<body>

    <div id="passage">hello</div>
    <div id="question"></div>
    <div id="answers"></div>

</body>

</html>

为什么document.getElementById("passage").innerHTML = "Paragraph changed!"不适合我？我最后得到一个空白的屏幕，甚至不是原来的“你好”。

Answer 1

在加载元素之前调用脚本，尝试在加载元素

之后调用脚本

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <div id="passage">hello</div>
      <div id="question"></div>
      <div id="answers"></div>
      <script>
         document.getElementById("passage").innerHTML = "Paragraph changed!";
      </script>
   </body>
</html>

Answer 2

如果您检查控制台，则可以看到错误

未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39;为null

这就是自上而下解析和执行HTML页面。

因此，它无法确定您提到的元素是什么。

因此，您应该使用EventListener或将脚本放在body标记

结尾之前

方法1事件监听器

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<script>
window.onload=function(){
  document.getElementById("passage").innerHTML = "Paragraph changed!";
};
</script>
<body>

<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>

</body>
</html>

＆＃13;

方法2：脚本位于正文标记

之上

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>

＆＃13;

Answer 3

加载页面后，您应该执行脚本否则，当您引用它们时，页面的所有元素可能仍未附加到dom。

而不是在可能容易出错的元素声明之后移动脚本（您应该始终了解脚本的顺序），您可以使用设计在dom完全装满后执行的事件例如onload的{{1}}属性：

body

Answer 4

您的脚本在加载元素之前调用。

尝试

    $(document).ready(function()
{
    document.getElementById("passage").innerHTML = "Paragraph changed!";
    });

JS：

(function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
})

Javascript innerhtml不在div上工作

4 个答案:

方法1事件监听器

方法2：脚本位于正文标记