未捕获的TypeError：无法读取null的属性'appendChild'

小编典典

未捕获的TypeError：无法读取null的属性'appendChild'

ajax

我收到以下错误

未捕获的TypeError：无法读取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

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

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

阅读 346

2020-07-26

共1个答案

小编典典

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

在该行中：

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

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

2020-07-26