使用innerHTML时报Cannot set properties of null错误如何解决

报错原因 #

该报错的核心是document.getElementById("ID")执行时未匹配到对应DOM元素，返回值为null，对null设置innerHTML属性会触发此类型错误。

常见解决方案 #

• 调整JS代码加载顺序
  浏览器是从上到下逐行解析代码的，如果你的JS代码写在了<div id="ID"></div>元素的前面（比如放在head标签内、或者DOM节点上方），执行JS时对应节点还没被渲染，自然找不到元素。可以直接把JS代码移到body标签末尾、所有DOM元素的后方执行：

  <body>
    <div id="ID"></div>
    <script>
      document.getElementById("ID").innerHTML = "Test";
    </script>
  </body>
  

• 监听DOM加载完成事件后再执行逻辑
  如果不方便调整JS位置，可以监听DOMContentLoaded事件，等整个DOM树解析完成后再执行操作：

  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("ID").innerHTML = "Test";
  });
  

• 核对ID匹配情况
  getElementById的参数是大小写敏感的，确认HTML的id属性值和JS传入的参数拼写、大小写、特殊字符完全一致，没有多余空格。

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