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项移动到另一个父项finally。引用the docs：

如果给定的子节点是对该节点中现有节点的引用 document，appendChild（）将其从当前位置移动到new position（不需要从父节点中删除节点）节点在将其附加到其他节点之前）。

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

1 个答案: