JavaScript：for循环在几个地方追加元素

Question

我有一个 for 循环，需要将列表项附加到共享相同类名的两个菜单中。问题是，如果我引用它的索引或者如果我使用 I 的索引，它只会附加到一个或另一个，它只会附加到最后一项。

HTML

<ul class="menu">
<li>List One</li>
</ul>

<ul class="menu">
<li>List Two</li>
</ul>

JS

var menu    = document.querySelectorAll('.menu');
var listItem    = document.createElement('li');

for(i=0; i < menu.length; ++i){
    menu[i].appendChild(listItem);
}

这是 JS 的另一个奇怪的怪癖还是我错过了什么？

Answer 1

应该是……

var menu = document.querySelectorAll('.menu');
var listItem = document.createElement('li');

for (var i=0; i < menu.length; ++i) {
    menu[i].appendChild(listItem.cloneNode());
    // or menu[i].appendChild(document.createElement('li'));
    // the point is, you'll have to create a new element and append it
}

就目前而言，您只需将同一元素从一个父项.menu 移动到另一个父项。引用the docs:

如果给定的孩子是对现有节点的引用 文档， appendChild() 将其从当前位置移动到新位置 位置（不需要从其父节点中删除节点 节点，然后将其附加到其他节点）。