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不返回Element,但返回Element元素.

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

查看此文档: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().