报错现象如上图:
Cannot set properties of null ( setting ‘innerHTML’ ) 的意思:无法设置未定义或null引用的属性innerhtml。
分析:
一,innerHTML前面的对象是null或未定义。
el.innerHTML = 'test';
这里el可能是空。找不到要插入HTML代码的地方。所以先确保已经成功获取了要插入的元素对象(检查下对象名字有没有写错,前后不对应等情况)。如下result先确保获取成功:
var result = document.getElementById("id name") ;
result.innerHTML = "<P>123</P>";
二,了解浏览器工作原理:由于浏览器解析HTML代码时候,是自上而下来执行的。
有可能是解析了js代码的时候,还没解析到body里面的代码,因此找不到对应的操作对象。此时,两个解决方法:1,重新排序脚本。把js代码放在body内容的后面,即</body>标签的前面。如下:
<body>
HTML代码。。
<script>js代码</script>
</body>
2,js代码用 window.onload事件,来进行事件挂钩,意思是等页面加载后再执行这段代码。如下:
<script>
window.onload = function(){
js代码
}
</script>
原理详细解说参考:javascript - Cannot set property 'innerHTML' of null - Stack Overflow
小结:
1,先确保已经成功获取了操作对象。
2,根据自上而下解析原理,重新排序脚本或者加window.onload事件。
3,后面发现更多方法再更新。