JavaScript:for循环在多个位置附加元素

JavaScript: for loop append element in several places

本文关键字：位置 元素 for 循环 JavaScript      更新时间：2023-09-26

我有一个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的另一个奇怪的怪癖吗？还是我只是错过了什么？

应该是…

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项移动到另一个。引用文档：

如果给定的子节点是对document，appendChild((将其从当前位置移动到新位置位置(不要求从其父节点中删除节点节点，然后将其附加到某个其他节点(。

相关文章：