使用数组通过appendChild添加元素时Edge浏览器报错原因解析

代码示例 #

JavaScript代码

var text = [];

function create() {
  for (var i = 0; i < 4; i += 1) {
    text[i] = document.createElement("div");
    text[i].className = "di";
    text[i].innerHTML = "hello world";
    console.log(text[i]);
    document.body.appendChild(text[i]);
  }
}
create();

CSS代码

.di {
  border: solid green 2px;
  margin-right: 65em;
}

错误原因 #

报错caught TypeError: Cannot read properties of null (reading 'appendChild')的核心原因是：代码执行时document.body还未被浏览器解析生成，此时它的值为null，自然无法调用appendChild方法。

如果你的JS代码直接放在<head>标签里，或者在<body>标签之前加载执行，浏览器会优先解析执行JS，这时候DOM树还没构建到<body>节点，document.body就会返回null。

而Stack Overflow的代码片段环境默认会在页面DOM完全加载完成后再执行JS代码，所以不会触发这个报错。

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