Javascript appendChild 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8407487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
appendChild Not Working
提问by bingjie2680
HTML:
HTML：
<ul id="datalist">
</ul>
JavaScript:
JavaScript：
function add(content){
ul=document.getElementsByTagName("ul");
var li=document.createElement("li");
li.innerHTML=content;
ul.appendChild(li);
}
When I call add, Uncaught TypeError: Object #<NodeList> has no method 'appendChild'is thrown. Any idea why?
当我调用时add，Uncaught TypeError: Object #<NodeList> has no method 'appendChild'被抛出。知道为什么吗？
回答by kapa
getElementsByTagName()does not return one element, it returns a NodeList, which is an array-like object. It basically means you can use it as an array.
getElementsByTagName()不返回一个元素，它返回一个NodeList，它是一个类似数组的对象。这基本上意味着您可以将其用作数组。
So you could do for example:
所以你可以做例如：
var ul = document.getElementsByTagName("ul")[0];
But why don't you simply use getElementById(), if that list has an ID anyways? IDs must be unique in the whole document, so this method will only return one element.
但是getElementById()，如果该列表无论如何都有 ID，为什么不简单地使用？ID 在整个文档中必须是唯一的，因此此方法将只返回一个元素。
var ul = document.getElementById('datalist');
Note:Please be sure to declare ulas a local variable to your function (add var), unless you mean to use it outside the function.
注意：请务必声明ul为函数的局部变量 (add var)，除非您打算在函数外使用它。
回答by Edgar
document.getElementsByTagName doesn't return a Element, but returns an Array of Elements.
document.getElementsByTagName 不返回元素，而是返回元素数组。
You need to loop this array or get some unique Element.
您需要循环此数组或获取一些独特的元素。
Look this documentation: https://developer.mozilla.org/en/DOM/element.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
}
}
回答by David says reinstate Monica
The problem you have is that getElementsByTagName()(note the plural implied by the 's' in the name of the function) returns an arrayof DOM nodes, not a single DOM node, which is what appendChild()expects to work on; therefore you need to identify which of the array of nodes you want to work with:
您遇到的问题是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);
}
Remember that if there's only oneulon the page, you could use getElementsByTagName("ul")[0]or(and this might be preferable) add an idattribute to that uland then select it with getElementById(), which will, as expected, return just that one id.
请记住，如果页面上只有一个ul，您可以使用getElementsByTagName("ul")[0]or（这可能更可取）向其添加一个id属性，ul然后使用 选择它getElementById()，这将如预期的那样返回那个id。
References:
参考：
