Javascript不会影响HTML元素，除非它低于它[重复]答案

【问题标题】：Javascript won't affect HTML element unless below it [duplicate]Javascript不会影响HTML元素，除非它低于它[重复]
【发布时间】：2019-01-22 11:50:23
【问题描述】：

如果我尝试使用脚本 (getElementById) 影响 HTML 元素，它仅在脚本出现在元素之后时才有效。 javascript 代码不是通常都在 HTML 文档的顶部吗？例如：

为什么会这样：

<!DOCTYPE html>
<html>
<body>
<p id="helloMessage"> </p>
<script>
document.getElementById("helloMessage").innerHTML = "Hello, World!";
</script>
</body>
</html>

但这不是

<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("helloMessage").innerHTML = "Hello, World!";
</script>
<p id="helloMessage"> </p>
</body>
</html>

【问题讨论】：

这是因为，在第二个 sn-p 中，当 JavaScript 开始执行时，该元素不存在于文档 (DOM) 中。这就是为什么您的 JS 代码无法修改它的原因。在你吃到披萨之前，你不能吃披萨。
HTML 由浏览器逐行解析。如果脚本在之前，则执行脚本时 HTML 元素还不存在。

标签： javascript

【解决方案1】：

如果 sn-p 非常具体，将 sn-p 放在 element 之前，那么这一行 document.getElementById("helloMessage") 将尝试从 DOM 中找到一个 id 为 helloMessage 的元素，因为该元素不存在它不会工作

您仍然可以通过将此代码放在window.onload 中来将其放在 html 之前

<html>

<body>
  <script>
    window.onload = function() {
      document.getElementById("helloMessage").innerHTML = "Hello, World!";
    }
  </script>
  <p id="helloMessage"> </p>
</body>

</html>

【讨论】：