JS报错Cannot read properties of null (reading 'appendChild')：原因及修复方案

报错原因 #

核心问题是JS代码执行时机早于目标DOM元素的加载完成时间。浏览器解析页面是从上到下依次进行的，如果你的JS代码写在HTML结构（尤其是id为generateList的<ul>元素）之前，浏览器执行JS时还没解析到这个元素，document.getElementById('generateList')就会返回null，调用null.appendChild()自然就抛出Cannot read properties of null (reading 'appendChild')的错误。

修复方案 #

以下是三种可行的解决办法：

• 把JS代码放到HTML末尾（</body>标签前）
  让浏览器先解析完所有DOM元素再执行JS，确保获取目标元素时它已经存在。示例代码：

  <ul id="generateList">
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
  </ul>
  
  <script>
      const list = document.getElementById('generateList');
      const listAdd = document.createElement('li');
      listAdd.innerText = "Name";
      list.appendChild(listAdd);
  </script>
  </body>
  

• 用DOMContentLoaded事件监听
  强制JS代码在DOM树完全构建完成后再执行，哪怕JS放在<head>里也能正常工作。示例代码：

  document.addEventListener('DOMContentLoaded', function() {
      const list = document.getElementById('generateList');
      const listAdd = document.createElement('li');
      listAdd.innerText = "Name";
      list.appendChild(listAdd);
  });
  

• 给<script>标签加defer属性
  defer会让浏览器在解析完DOM后再执行JS脚本，同时不会阻塞HTML的解析，适合外部JS文件或内联脚本。示例：

  <head>
      <script defer>
          const list = document.getElementById('generateList');
          const listAdd = document.createElement('li');
          listAdd.innerText = "Name";
          list.appendChild(listAdd);
      </script>
  </head>
  <body>
      <ul id="generateList">
          <li>test</li>
          <!-- 其他li元素 -->
      </ul>
  </body>
  

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