【JavaScript】关于Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)报错

问题：

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')的意思是 未捕获的TypeError:不能设置null属性(设置'innerHTML') 。

错误代码：

输出内容：执行getElementById.innerHTML时找不到demo的内容，找不到你想将所写的HTML代码插入的地方。如图示：

 

分析原因：

此问题涉及到HTML中Javascript脚本的加载和执行，浏览器总是从上到下加载整个 HTML DOM。任何写在标签内的 js 代码都会被浏览器渲染引擎执行，甚至在加载整个body 标签内的各种 HTML 元素标签之前。当执行到innerHTML这一行代码时，并没有加载到下面的DOM结构，所以就会报错无法读取HTML。

DOM文档加载步骤： 

1. 解析HTML结构 
2. 加载外部的脚本和样式文件 
3. 解析并执行脚本代码 
4. 执行$(function(){})内对应代码 
5. 加载图片等二进制资源 
6. 页面加载完毕，执行window.onload

解决方法：

方法一：将js放在底部，等浏览器自上往下完全加载完DOM后，再执行js脚本就不会出现空引用。

代码示例：

 输出结果：

 方法二：使用事件挂钩 window.onload，在原本的script标签中添加window.onload，让浏览器加载完成DOM后再执行脚本。

代码示例：

 输出结果：

 参考链接：HTML中Javascript脚本的加载和执行_Cassie's blog-CSDN博客_html执行js代码

javascript - Cannot set property 'innerHTML' of null - Stack Overflow