我正在尝试获取 ul 的子项。我试图通过 childNodes 来实现这一点。然后我在节点上迭代以将值添加到无序列表 的子列表项。但它不起作用。
function getListItem() {
var list = document.getElementById("list").childNodes;
for (var i = 0; i < list.length; i++) {
text = document.createTextNode(i);
list[i].appendChild(text);
}
}<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button onclick="getListItem()">Submit</button>
</body>我无法弄清楚即将发生的错误。请帮帮我。
编辑 1
Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method
最佳答案
当您使用 .childNodes 时，它可能会返回空格和换行符。当您打印元素 list 时，您将获得以下输出:
[text, li, text, li, text, li, text, li, text, li, text]
您看到第一个元素是 text 而不是 li。解决方法是使用 getElementsByTagName('li')。
function getListItem() {
var list = document.getElementById("list").getElementsByTagName('li');
console.log(list);
for (var i = 0; i < list.length; i++) {
text = document.createTextNode(i);
list[i].appendChild(text);
}
}<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button onclick="getListItem()">Submit</button>
</body>希望这能奏效。
关于javascript - 获取有序列表的子节点时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45421448/