Javascript append/appendChild不处理所有项目

我试图只使用javascript将所有列表项从一个列表移动到另一个列表，但由于某些原因，实际上只移动了其中的一半

下面是我正在做的一个工作示例：

var results\u ul=document.getElementById（'results'）；
var stores_li=document.getElementsByClassName（'store-list-item'）；
对于（变量x=0；x

结果


测试1
测试2
测试3
测试4

隐藏：

您最好使用

querySelectorAll

而不是

getElementsByClassName

var results\u ul=document.getElementById（'results'）；
var stores_li=document.querySelectorAll（“.store list item”）；
存储每台设备（（项目）=>{
document.getElementById（'hide'）.appendChild（项）；
item.className+='teste'；
});
结果


测试1
测试2
测试3
测试4

隐藏：

getElementsByClassName
返回活动列表

将元素附加到其他元素时，会更改其在列表中的位置

因此，它的开头是：

1 2 3 4

然后移动第一个：

2 3 4 1

然后您访问第二个…但是第二个现在是
3
，因为所有内容都在列表中向下移动


您可以将每个元素复制到一个数组中（该数组不是活动列表），然后在该数组上迭代以移动它们（这样它们就不会在移动过程中改变位置）

或者，您可以使用返回非活动列表的。
尝试使用querySelectorAll。它将返回一个非活动列表。这就是你需要的

var results_ul = document.getElementById('results');
var stores_li = document.getElementsByClassName('store-list-item');

while(stores_li.length>0) {
   document.getElementById('hide').appendChild(stores_li[0]);
   stores_li[x].className += ' teste';
}

var stores_li = document.querySelectorAll('.store-list-item');

要增加更多信息：

Live：当DOM中的更改反映在集合中时。修改节点时，内容会发生更改

非实时：当DOM中的任何更改都不会影响集合的内容时

getElementsByCassName（）是一个HTMLCollection，并且是活动的

document.querySelectorAll（）是一个节点列表，不是活动的。
在代码中，您将从第一个列表中删除每个元素，并插入到新列表中。删除2个元素后，第一个列表中只有2个元素，但现在您正在搜索循环中不存在的第3个索引。因此，为了让它发挥作用，我预先准备了上一个元素中的每个元素


var results\u ul=document.getElementById（'results'）；
var stores_li=document.getElementsByClassName（'store-list-item'）；
var hide_ul=document.getElementById（'hide'）；
对于（变量x=0，y=stores_li.length；x

结果


测试1
测试2
测试3
测试4

隐藏：

或者您可能希望使用Jquery克隆元素，您可以将其推入克隆元素，然后从顶部删除原始元素。我找不到任何与js对应的clone（），但如果你想检查link is
这更像是一个发现差异的游戏，而不是一个答案。你改变了什么？它为什么要解决问题呢？虽然它确实解决了问题，但我同意这不是一个恰当的解决办法answer@Quentin我的英语不好。当我回答这个问题时，我花了很多时间。我只能提供解决方案。我还没有教英语的能力。我只是想帮助某人。我想我的答案可以解决这个问题。有问题吗？这读起来更像是一个发现差异的游戏，而不是一个答案。你改变了什么？为什么要解决这个问题呢？
while（stores\u li.length>0）
这个条件永远不会成立。您已经创建了一个无限循环。非常感谢您提供的详细答案。现在我完全明白了问题的症结所在：）QuerySelector确实做到了！