javascript - 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];

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

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

---

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

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 
    }
}

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().