加载 JS 时出现Cannot read property 'appendChild' of null
错误:
<head>
<script>
let li = document.createElement("li");
let text = document.createTextNode("广州");
/*将 广州 添加到li*/
li.appendChild(text);
let box2 = document.querySelector(".box1 .box2");
console.log(box2);
box2.appendChild(li);
}
</script>
</head>
<body>
<div class="box1">
<div class="box2">你好</div>
</body>
定位:
经过筛查发现错误出现在对象box2段,box2为null。
querySelector查询不到选择器的字符串.box .box2。
问题原因:
检查代码发现,script标签写在页面上边,而浏览器中文档的加载顺序是自上而下,当读取querySelector(".box .box2")时 页面中html代码还未读取,因此导致box2对象为null,从而调用appendChild()时出现Cannot read property 'appendChild' of null。
解决方法:
window.οnlοad=function(){}
onload事件在页面加载完后才触发,为window绑定onload事件。