未捕获的类型错误：无法读取 null 的属性“appendChild”答案

【问题标题】：Uncaught TypeError: Cannot read property 'appendChild' of null未捕获的类型错误：无法读取 null 的属性“appendChild”
【发布时间】：2015-07-12 21:24:27
【问题描述】：

我收到以下错误

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

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的内容

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

我将脚本标签放在 html as suggested by @Tejs here 的底部，但我仍然收到此错误。

【问题讨论】：

它不会在我的 h1 标签下显示 simple.txt 的内容。另外，我在控制台中收到错误
你是对的。我把我的文件弄混了。它现在正在工作。谢谢

标签： javascript ajax

【解决方案1】：

执行回调时，您的页面上没有 ID 为“mainContent”的元素。

行内：

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

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

【讨论】：

我的 html 中有一个名为 mainContent 的 id。我错过了什么？
5 年后@Sparky 你想展示你关于 prop 错误 appendchild 的代码吗？
@Timo 我认为他没有

【解决方案2】：

使用 getElementById() 的 querySelector；

var c = document.querySelector('#mainContent');
    c.appendChild(document.createElement('div'));

【讨论】：

【解决方案3】：

对于有相同问题的人querySelector 或getElementById 返回以下错误：

Uncaught TypeError: Cannot read property 'appendChild' of null

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

如果您的脚本标签位于头部，则 JavaScript 会在您的 HTML 之前加载。您需要将defer 添加到您的脚本中，如下所示：

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

【讨论】：

添加 defer 将使您的代码依赖于浏览器。检查我在下面给出的答案。 sifr_dot_in
在脚本文件中加入“defer”可以解决问题。使用“延迟”，javascript 文件在页面上最后打开。因此，它可以防止错误发生。

【解决方案4】：

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

使用

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

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

【讨论】：

【解决方案5】：

您可以在 Angular 中加载外部 JS 文件，也可以直接加载它们，而不是在 index.html 文件中定义。

component.ts：

ngOnInit() {
    this.loadScripts();
}


  loadScripts() {
    const dynamicScripts = [
      //scripts to be loaded
      "assets/lib/js/hand-1.3.8.js",
      "assets/lib/js/modernizr.jr.js",
      "assets/lib/js/jquery-2.2.3.js",
      "assets/lib/js/jquery-migrate-1.4.1.js",
      "assets/js/jr.utils.js"
    ];
    for (let i = 0; i < dynamicScripts.length; i++) {
      const node = document.createElement('script');
      node.src = dynamicScripts[i];
      node.type = 'text/javascript';
      node.async = false;
      document.getElementById('scripts').appendChild(node);
    }
  }

component.html：

<div id="scripts">
</div>

您也可以类似地加载样式。

component.ts：

ngOnInit() {
    this.loadStyles();
}


  loadStyles() {
    const dynamicStyles = [
      //styles to be loaded
      "assets/lib/css/ui.css",
      "assets/lib/css/material-theme.css",
      "assets/lib/css/custom-style.css"
    ];
    for (let i = 0; i < dynamicStyles.length; i++) {
      const node = document.createElement('link');
      node.href = dynamicStyles[i];
      node.rel = 'stylesheet';
      document.getElementById('styles').appendChild(node);
    }
  }

component.html：

<div id="styles">
</div>

【讨论】：

所以，为了解决这个问题，OP 应该学习 Angular。真的吗？

【解决方案6】：

如果您在 AJAX 帖子中遇到这种情况，您需要比较您发送的值和控制器期望的值。

就我而言，我已将可序列化类中的参数从 State 更改为 StateID，然后在 AJAX 调用中没有将接收字段更改为“数据”

成功：函数（数据）{ MakeAddressForm.formData.StateID = data.State;

请注意，该类已更改 - 我在 formData 中将其称为什么并不重要。

这在 formData 中创建了一个空引用，我在完成更新后试图将其发回控制器。显然，如果有人更改了状态（这是表单的目的），那么他们不会收到错误，因此很难找到。

这也是通过 500 错误。我在这里发布这个希望它可以节省别人我浪费的时间

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

那些获取返回以下错误的 querySelector 或 getElementById：

Uncaught TypeError: Cannot read property 'appendChild' of null

或任何其他属性，即使您在 HTML 中有类名或 id

不要使用（推迟，因为它过于依赖浏览器。）

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

相反，把你所有的代码放在'script.js'里面

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

【讨论】：

这不只是将依赖从“跨浏览器”移动到“jQuery”吗？也许添加一个 POJS 版本。

【解决方案9】：

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

【讨论】：

【解决方案10】：

在正文标签的底部添加您的脚本标签。这样脚本在 html 内容之后加载，那么您将不会收到此类错误并添加=

【讨论】：

请尝试用伪代码给出解释，以便未来的观众了解您想要传达的内容。

【解决方案11】：

使用 Javascript 在没有缓存的情况下加载外部时遇到同样的问题

Load external <script> without cache using Javascript

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

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

但这发生了：未捕获的类型错误：无法读取 null 的属性“appendChild”。

这里有很好的解释：https://stackoverflow.com/a/58824439/14491024

正如它所说的你的脚本标签在头部，JavaScript 是在你的 HTML 之前加载的。

在 C# 的 Visual Studio 中，这个问题是通过添加 Guid 来解决的：

这是它在查看页面源代码中的外观：

【讨论】：

【解决方案12】：

用 REACT 做这件事。 Y 只需要使用 try/catch 或 if(elem !=null) 来防止 React 崩溃，因为它会在创建任何 DOM 之前为 VirtualDom 进行预渲染！）

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。