HTML中div位置的重要性：为何div在JS代码后功能失效？

核心原因很简单：浏览器是按从上到下的顺序解析HTML文档的，当你的JS代码执行时，后面的div还没被解析到DOM树里，自然找不到元素。

具体拆解一下：

• 解析顺序：浏览器加载HTML时，逐行解析内容，遇到<script>标签会立刻暂停HTML解析，优先执行JS代码。如果div在script之后，此时div还没被处理，DOM里根本没有id="content2display1"的元素。
• 错误触发：document.getElementById('content2display1')找不到元素会返回null，你接着尝试给null.innerHTML赋值，会直接抛出TypeError: Cannot set properties of null (setting 'innerHTML')的错误。这个错误会导致getRandom1函数执行失败，后续setInterval虽然还在定时调用，但每次都会触发同样的错误，计数器完全无法工作。

解决方法 #

有几种常见的方案可以避免这个问题：

1. 把JS代码放到body末尾（div之后）
   这是最直接的方式，确保所有DOM元素都解析完成后再执行JS，就像你一开始能正常运行的写法那样。

2. 监听DOM加载完成事件
   用DOMContentLoaded事件包裹你的JS逻辑，不管script放在哪里，都会等DOM全部解析完成后再执行：

   document.addEventListener('DOMContentLoaded', function() {
       let x = 0;
       function getRandom1() {
           x += 1;
           document.getElementById('content2display1').innerHTML = x;
           console.log("x: ", x);
       }
       getRandom1();
       setInterval(getRandom1, 1000); // 建议直接传函数引用，不要用字符串
   });
   

3. 给script标签加defer属性
   如果想把JS放在head里，可以给script标签加defer属性，浏览器会继续解析HTML，等DOM加载完成后再执行JS：

   <head>
       <script defer>
           // 你的JS代码
       </script>
   </head>
   

额外小建议 #

不要用字符串作为setInterval的参数（比如setInterval("getRandom1();", 1000)），直接传函数引用（setInterval(getRandom1, 1000)）更安全，也避免了不必要的eval调用。

内容的提问来源于stack exchange，提问作者Riemann