JavaScript中重置父元素异常：重置按钮仅移动2个元素问题排查

这个坑我踩过！你的reset函数里出现的问题，根源在于**favouritesDiv.children是动态的HTMLCollection对象**——当你把元素从原容器移走时，这个集合的长度会实时更新，直接遍历就会导致循环跳过元素。

具体为啥只移回2个？ #

假设3个按钮都在favourites里：

1. 初始children.length是3，i=0，移走第一个按钮，此时children集合长度变成2（剩下原第二、第三个按钮）；
2. i自增到1，此时children[1]对应的是原第三个按钮，移走后children长度变成1；
3. i再自增到2，这时i < children.length（2 < 1）不成立，循环直接结束，原第二个按钮就留在favourites里了，所以最终只移回2个。

两种可行的修复方案 #

方案1：把动态集合转为静态数组

用Array.from()或者扩展运算符[...]把HTMLCollection转成普通数组，这样遍历的是固定的副本，不受原集合变化影响：

function reset(){ 
  let startingDiv = document.querySelector('#startingArea'); 
  let favouritesDiv = document.querySelector("#favourites"); 
  // 转换为静态数组，避免动态更新干扰遍历
  const children = Array.from(favouritesDiv.children); 
  for(let i=0; i<children.length; i++){ 
    startingDiv.append(children[i]); 
  } 
}

方案2：倒序遍历元素

从最后一个元素开始往前移，这样即使前面的元素被移走，后面的索引不会因为集合长度变化而错位：

function reset(){ 
  let startingDiv = document.querySelector('#startingArea'); 
  let favouritesDiv = document.querySelector("#favourites"); 
  let children = favouritesDiv.children; 
  // 从最后一个元素开始遍历，倒序处理
  for(let i = children.length - 1; i >= 0; i--){ 
    startingDiv.append(children[i]); 
  } 
}

另外建议把代码里的var换成let，避免变量提升带来的潜在问题，让代码更严谨。

内容的提问来源于stack exchange，提问作者j.sinjaradze