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'。知道为什么吗？

Answer 1

getElementsByTagName()不返回一个元素，它返回一个NodeList，这是一个类似数组的对象。它基本上意味着你可以将它用作数组。

所以你可以这样做：

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

但是，如果该列表仍有ID，为什么不简单地使用getElementById()？ ID在整个文档中必须是唯一的，因此此方法只返回一个元素。

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

---

注意：请务必将ul声明为您的函数的局部变量（添加var），除非您打算在函数外部使用它。

Answer 2

document.getElementsByTagName不返回Element，但返回一个Elements数组。

您需要循环此数组或获取一些独特的元素。

查看此文档：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 
    }
}

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] 或（这可能更合适）添加id属性为ul，然后选择getElementById()，按预期方式，只会返回id。

参考文献：

• getElementsByTagName()。
• getElementById()。