设置tbody的innerHTML时报Cannot set properties of null错误如何解决？

报错原因 #

你遇到的报错本质是document.getElementById('tableBody')没有匹配到对应的DOM元素，返回了null，后续对null设置innerHTML属性就会抛出该错误。

常见原因及解决方案 #

• JS执行时机早于DOM渲染
  如果你把JS代码放在<head>标签内，或者放在<tbody>元素的代码位置之前，浏览器执行JS的时候还没解析到对应的tbody节点，自然找不到元素。
  对应解决方案二选一即可：
  1. 将JS代码移到HTML文件的</body>结束标签之前，保证所有DOM内容解析完成后再执行JS逻辑
  2. 把需要操作DOM的代码包裹在DOMContentLoaded事件回调中，示例代码：

  document.addEventListener('DOMContentLoaded', function () {
    // 你原来获取tbody、添加行的逻辑放到这里
  })
  

• id属性拼写不匹配
  HTML的id属性是区分大小写的，只要有一个字符大小写、拼写不一致，就会匹配失败。请核对你HTML中tbody标签的id属性，确保书写完全和JS中的tableBody一致，排除写成tablebody、TableBody、table_body这类拼写错误的可能。
• tbody为动态生成的DOM节点
  如果你的table或者tbody本身是其他JS逻辑动态插入到页面中的，你调用getElementById的时候该节点还没被插入到DOM树中，也会返回null。
  解决方案：调整代码执行顺序，保证获取tbody的逻辑在tbody节点已经被插入到DOM之后再执行。

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