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

Question

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

48

我遇到了下面的错误：

Uncaught TypeError: Cannot read property 'appendChild' of null

myRequest.onreadystatechange @ script.js:20

这是由于我的代码出现了问题。

// index.html 
<html>
    <head>
        <title>Simple Page</title>
    </head>
    <body>
        <div id="mainContent">
            <h1>This is an AJAX Example</h1>
        </div>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

这是我的JavaScript文件

// script.js
// 1. Create the request

var myRequest;

// feature check!
if(window.XMLHttpRequest) { // Firefox, Safari
    myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject){ // IE
    myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}


// 2. Create an event handler for our request to call back 
myRequest.onreadystatechange = function() {
    console.log("We were called!");
    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. open and send it
myRequest.open("GET","simple.txt", true);

// any parameters?
myRequest.send(null);

以下是simple.txt的内容：

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

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

- Sparky

它不会在我的h1标签下显示simple.txt的内容。此外，我会在控制台中收到错误。 - Sparky

你是对的。我的文件混乱了。现在它可以工作了。谢谢。 - Sparky

13个回答

28

在执行回调函数时，您的页面中没有id为“ mainContent”的元素。

在这一行中：

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

该部分 document.getElementById("mainContent") 返回null

- Alex McMillan

1

我在我的HTML中有一个名为mainContent的id。我有遗漏吗？ - Sparky

五年后，@Sparky你是否想展示一下关于prop error appendchild的代码？ - Timo

@Timo 我不认为他会这样做。 - S.Alvi

11

这里有些好的答案。我遇到了同样的问题，但我尝试了 <script src="script.js" defer></script>，但效果不是很好。我的代码和链接都设置得很好，问题是我把JS文件链接放在页面头部，所以它在DOM加载之前被加载了。有两种解决方法。

使用 defer 属性将脚本延迟到 DOM 加载后再加载。

window.onload = () => {
    //write your code here
}

将 <script src="script.js"></script> 添加到 html 文件底部，以便它最后加载。

- Edgar256

6

如果您使用的是querySelector或getElementById，而返回以下错误：

Uncaught TypeError: Cannot read property 'appendChild' of null

或者任何其他属性，即使在HTML中有类名或id也不要使用(defer因为它太依赖于浏览器)。

<script src="script.js" defer></script>  //don't use this

相反地，将您的所有代码放在 'script.js' 文件中

$(document).ready(function(){
    //your script here.
}

- sifr_dot_in

4

这不仅仅是将“跨浏览器”依赖转移至“jQuery”吗？也许可以加一个纯JavaScript版本。 - Alex McMillan

该OP没有指明他们是否在使用jQuery。 - Chuck Le Butt

与jquery版本相对应的是https://dev59.com/iHE95IYBdhLWcg3wdtmj#21814964 - Dwza

3

不要在<head>中使用定义.js文件源的脚本标签，而是将其放置在HTML代码底部。

- Aneeb Afzal

2

"Cannot read property 'appendChild' of null"错误出现的原因有两个：

在不存在的DOM元素上调用appendChild()方法。
将JS脚本标签插入到HTML之上，在声明DOM元素的位置之前。

你遇到的问题是由第二个错误引起的。你可以通过将JS脚本标签从body标签移到head标签中并进行编辑来解决它。例如：

// index.html 
<html>
    <head>
        <title>Simple Page</title>
        <script async defer src="script.js"></script>
    </head>
    <body>
        <div id="mainContent">
            <h1>This is an AJAX Example</h1>
        </div>
       
    </body>
</html>

- Hello_World

2

当使用JavaScript加载外部脚本时，如果不缓存，会遇到相同的问题。

使用JavaScript加载外部<script>而不缓存

这里有一个很好的解决方案来解决缓存问题:

https://www.c-sharpcorner.com/article/how-to-force-the-browser-to-reload-cached-js-css-files-to-reflect-latest-chan/

但是遇到了这个问题: Uncaught TypeError: Cannot read property 'appendChild' of null.

这里有一个很好的解释: https://dev59.com/VV0a5IYBdhLWcg3wuKs7#58824439

如它所说，你的脚本标签在head中，JavaScript在HTML之前加载。

在Visual Studio中使用C#解决此问题是通过添加Guid来完成的：

这是在视图页面源中的样子：

- MikeRyz

2

我遇到了一个与REACT相关的问题。为了防止React在创建任何DOM之前对VirtualDom进行预渲染，只需使用try/catch或if(elem !=null)即可防止React崩溃！

- Vlad Dobrinov

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

1

在body标签的底部添加您的脚本标签。这样，脚本会在HTML内容加载后加载，然后您就不会遇到这样的错误，并且添加=。

- Amar singh

请尝试使用伪代码进行解释，以便未来的读者能够理解您要传达的内容。 - Not A Bot

1

将您的JavaScript放在页面底部（即在定义元素之后..）

- wiseman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Loretta · Accepted Answer

对于遇到以下错误的人，即 querySelector 或 getElementById 函数无法正常工作：

Uncaught TypeError: Cannot read property 'appendChild' of null

但是在HTML中有一个类名或ID...

如果你的