appendChild不起作用

Question

HTML：

<ul id="datalist">
</ul>

JavaScript：

function add(content){
   ul=document.getElementsByTagName("ul");
   var li=document.createElement("li");
   li.innerHTML=content;
   ul.appendChild(li);
}

我调用add时，抛出了Uncaught TypeError: Object #<NodeList> has no method 'appendChild'的错误。有任何想法是为什么？

- bingjie2680

---

如果没有使用jQuery，那么为什么要将它作为问题的标签添加呢？ - Rory McCrossan

抱歉，我不太清楚它是否标记为Jquery。标记应该是JavaScript和DOM，对吧？ - bingjie2680

当问题被创建时，它被标记为 jQuery - Jasper 已编辑以将其替换为 javascript。 - Rory McCrossan

对不起，那一定是我的错误... - bingjie2680

Answer 1

getElementsByTagName() 不返回一个元素，它返回的是一个类似数组的对象NodeList，这意味着你可以像使用数组一样使用它。

因此，例如您可以这样做：

var ul = document.getElementsByTagName("ul")[0];

但是如果这个列表已经有一个ID了，为什么不直接使用getElementById()呢？ID在整个文档中必须是唯一的，因此该方法只会返回一个元素。

var ul = document.getElementById('datalist');

---

注意：在函数中请确保将 ul 声明为局部变量（添加 var），否则您可能会在函数外使用它。

- kapa

---

当我使用getElementById时，控制台输出“未捕获的TypeError：无法调用null的appendChild方法”。 - bingjie2680

@bingije2680 我的jsFiddle显示它可以正常工作：）。请检查链接，如果您仍然有问题，请创建一个关于您情况的fiddle。 - kapa

Answer 2

document.getElementsByTagName不会返回单个元素，而是返回一个元素数组。

您需要循环此数组或获取某个唯一的元素。

请查看此文档：https://developer.mozilla.org/en/DOM/element.getElementsByTagName

// check the alignment on a number of cells in a table. 

var table = document.getElementById("forecast-table"); 
var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
    var status = cells[i].getAttribute("data-status"); 
    if ( status == "open" ) { 
        // grab the data 
    }
}

- Edgar

Answer 3

您遇到的问题是，getElementsByTagName()（请注意函数名称中“s”的复数形式）返回的是一个DOM节点的数组，而不是单个DOM节点，这是appendChild()所期望的；因此，您需要确定您想要使用的节点数组中的哪个节点：

function add(content){
   ul=document.getElementsByTagName("ul")[0]; // the [0] identifies the first element of the returned array
   var li=document.createElement("li");
   li.innerHTML=content;
   ul.appendChild(li);
}

请记住，如果页面上只有一个 ul，您可以使用 getElementsByTagName("ul")[0] 或者（这可能更好）为该 ul 添加一个 id 属性，然后使用 getElementById() 选择它，这将按预期返回该唯一的 id。

参考资料：

- getElementsByTagName()。 - getElementById()。

- David Thomas