未捕获的类型错误：无法读取 null 的 'appendChild' 属性。

14 浏览
0 Comments

未捕获的类型错误：无法读取 null 的 'appendChild' 属性。

我在我的代码中遇到了以下错误：\n

\nUncaught TypeError: Cannot read property \'appendChild\' of null\nmyRequest.onreadystatechange @ script.js:20\n

\n下面是我的代码：\n

// index.html 

    
        Simple Page
    
    
            
这是一个AJAX示例

\n这是我的JavaScript文件：\n

// script.js
// 1. 创建请求
var myRequest;
// 功能检查！
if(window.XMLHttpRequest) { // Firefox, Safari
    myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject){ // IE
    myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2. 创建请求的回调事件处理程序
myRequest.onreadystatechange = function() {
    console.log("我们被调用了！");
    console.log(myRequest.readyState);
    if(myRequest.readyState === 4){
        var p = document.createElement("p");
        var t = document.createTextNode(myRequest.responseText);
        p.appendChild(t);
        document.getElementById("mainContent").appendChild(p);
    }
};
// 3. 打开并发送请求
myRequest.open("GET","simple.txt", true);
// 是否有任何参数？
myRequest.send(null);

\n这是simple.txt的内容：\n

\n这是一个简单文本文件的内容。\n

\n我按照@Tejs在这里的建议，将脚本标签放在html底部，但仍然出现这个错误。

0

3 答案

0 Comments

文章标题：解决(Uncaught TypeError: Cannot read property 'appendChild' of null)错误的两种方法

最近在阅读相关问题的答案时发现了一些很好的解决方案。我也遇到了同样的问题，我尝试了<script src="script.js" defer></script>，但效果并不好。我已经正确设置了所有的代码和链接。问题是我把js文件的链接放在了页面的头部，这样它就在DOM加载之前被加载了。针对这个问题，有两种解决方法。

第一种方法是使用

window.onload = () => {
    //在这里编写你的代码
}

。

第二种方法是将<script src="script.js"></script>添加到html文件的底部，这样它就会在最后加载。

希望这两种方法能帮助到遇到相同问题的人们。

0
0 Comments

当执行回调函数时，页面上没有一个具有id为"mainContent"的元素。

在这一行代码中：

document.getElementById("mainContent").appendChild(p);

document.getElementById("mainContent") 这部分返回了 null。

我在HTML中有一个id为mainContent的元素。有什么地方我忽略了吗？

5年后你想展示一下关于prop错误appendchild的代码吗？

我不认为他想展示。

0
0 Comments

很多人遇到了以下错误：

Uncaught TypeError: Cannot read property 'appendChild' of null

，该错误通常发生在使用querySelector或getElementById时，尽管在HTML中已经有相应的类名或id。如果你的脚本标签位于标签内，那么JavaScript会在HTML加载之前加载，所以你试图访问的元素在DOM中尚不存在。你需要在脚本标签中添加defer属性，像这样：

<script src="script.js" defer></script>

。通过添加defer属性，代码在浏览器中执行时会等待HTML加载完成。将"defer"放在脚本文件中可以解决此问题。有了"defer"，JavaScript文件会在页面最后加载，这样就可以防止错误的发生。感谢你的解答，我差点要疯了。原来脚本标签在中，但是它竟然出现在我要操作的元素之前。

0