问题:
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文档加载步骤:
- 解析HTML结构
- 加载外部的脚本和样式文件
- 解析并执行脚本代码
- 执行
$(function(){})
内对应代码 - 加载图片等二进制资源
- 页面加载完毕,执行
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