未捕获的类型错误：p.appendChild不是一个函数。

Question

我正在学习Ajax课程，但这个非常简单的脚本却出现了一个我不明白的错误。我一直收到“未捕获的类型错误”的提示，指出appendChild方法不是一个函数。

我正在处理的功能旨在在单击链接时异步加载文本文件的内容到一个“p”标签中。

我对JavaScript还不太熟悉，所以很可能是我错过了一些简单的东西，我会感激任何帮助理解我做错了什么的帮助。

(function(){

var link = document.getElementsByTagName('a')[0];

link.onclick = function(){

    //create xhr object
    var xhr = new XMLHttpRequest();

    // handle the "onreadystatechange" event
    /*
    xhr.readysState property values
    0 = Uninitialized
    1 = Loading
    2 = Loaded
    3 = Interactive - server is sending a response
    4 = Complete
    */
    xhr.onreadystatechange = function() {

        if ( (xhr.readyState == 4) && (xhr.status == 200 || xhr.status == 304) ) {

            xhr.responseText;

            var body = document.getElementsByTagName('body')[0];
            var p = document.getElementsByTagName('p');
            var pText = document.createTextNode(xhr.responseText);

            console.log(p);
            console.log(pText);

            p.appendChild(pText);
            body.appendChild(p);
        }

    };

    // open the request
    /* arguments: 
    1. type of request a (GET or POST) 
    2. path 
    3. asynchronaus request? (true || false)*/
    xhr.open('GET', 'files/ajax.txt', true);  

    // send the request
    xhr.send(null)

    return false; // disable default behavior of link
};

})();

我已经创建了一个 jsFiddle 来展示我的代码: http://jsfiddle.net/scottm1164/656edjsf/

- scottM

Answer 1

getElementsByTagName 返回一个 NodeList，因此您需要使用索引访问单个项目，例如

var p = document.getElementsByTagName('p')[0];

它给出错误信息的原因是：

p.appendChild 不是一个函数

这是因为 appendChild 不是 NodeList 类型的函数。

- AmmarCSE

---

好的，这有道理，但是当我像你建议的那样将索引添加到p变量时，我最终又遇到了另一个错误:Uncaught TypeError: Cannot read property 'appendChild' of undefined - scottM

@scottM，你确定在执行document.getElementsByTagName('p')时有现有的“p”元素吗？ - AmmarCSE

@scottM，也许像minitech所说的那样，你是想创建一个p元素？ - AmmarCSE

没错，确实是缺少了createElement，Minitech捕捉到了这个错误。 - scottM

Answer 2

p是一个元素数组。你应该只选择一个。在你的fiddle中，你甚至没有1个。

- Daniel A. White

Answer 3

p 是一个 NodeList 对象；我认为你想使用 document.createElement 而不是 document.getElementsByTagName。

var p = document.createElement('p');

- Ry-

---

就是这样，谢谢！我应该看到了！ - scottM