调用appendChild报Uncaught TypeError空值错误问题咨询

错误原因 #

• 脚本加载时机错误：JS文件引入位置放在了<body>标签之前，代码执行时DOM树还未构建完成，所有DOM操作逻辑都会失效。
• 新建元素未挂载就查询：通过createElement创建的id为x的div仅存在于内存中，没有插入到页面DOM树里，此时调用document.getElementById("x")会返回null，对null执行appendChild方法就会触发Uncaught TypeError: Cannot read properties of null (reading 'appendChild')报错。

修复方案 #

1. 调整HTML中脚本引入位置 #

将JS文件引入移到</body>结束标签之前，保证DOM加载完成后再执行JS逻辑：

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Actividad 3</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">

<body>
<h2>EXTRAS DISPONIBLES</h2>
<script type="text/javascript" src="actividad3.js"></script>
</body>
</html>

2. 修正JS中DOM操作逻辑 #

不需要额外查询刚创建的div，直接组装元素后插入到页面即可，同时优化参数兼容逻辑：

class extra {
    precio = "10€";
    url = "concha_azul.jpeg";
    constructor(precio, url) {
        // 兼容实例化时不传参数的场景
        this.precio = precio ?? this.precio;
        this.url = url ?? this.url;
    }
    getHTML = function () {
        console.log("hello");
        // 创建div元素
        const newDiv = document.createElement("div");
        newDiv.id = "x";
        // 创建img元素
        const img = document.createElement("img");
        img.src = this.url;

        // 直接将img插入到刚创建的newDiv中
        newDiv.appendChild(img);
        // 将组装完成的div插入到页面body中
        document.body.appendChild(newDiv);
    }
}

let miExtra = new extra();
miExtra.getHTML();

内容的提问来源于stack exchange，提问作者Samuel Van Bladel