附加子不工作

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 #没有抛出方法“appendChild”。知道为什么吗？

Answer 1

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

所以你可以这样做：

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

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

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

---

注意：请务必将 ul 声明为函数的局部变量（添加 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] 或（这可能更好）向该 ul 添加一个 id 属性，然后选择使用getElementById()，正如预期的那样，它只会返回那个 id。

参考文献：

• getElementsByTagName()。
• getElementById()。