Question

任何人都可以解释给定HTML的原因

<body>
  <div id="ustack1">
  Block 1:
  <div id="0"> 0 </div>
  <div id="1"> 1 </div>
  <div id="2"> 2 </div>
  <div id="3"> 3 </div>
  <div id="4"> 4 </div>
  <div id="5"> 5 </div>
  <div id="6"> 6 </div>
  <div id="7"> 7 </div>
  <div id="8"> 8 </div>
  <div id="9"> 9 </div>
  <div id="10"> 10 </div>
</div>

<div id="stagingDiv" style="display:inline-block;">
  Block 2:
</div>
</body>

和相应的javascript

var cards = document.getElementById("ustack1").children;

for(i=0;i<cards.length;i++){
  document.getElementById("stagingDiv").appendChild(cards[i]);
}

（如本jsfiddle所见：https://jsfiddle.net/73oszkj9/）

奇数元素被跳过？

Answer 1

cards是一个实时的HTMLCollection。当您执行appendChild时，您将节点移动到DOM中的另一个位置，从而将其从集合中移除。一种解决方案是迭代卡片直到它的长度为零：

while(cards.length > 0){
    document.getElementById("stagingDiv").appendChild(cards[0]);
}

这是一个更新的小提琴：https://jsfiddle.net/Lkvdep52/

如果它让你感觉更好，这是我们许多人曾经做过的错误;-)使用浏览器调试器是理解这类问题的根本原因的好方法。

Answer 2

当您使用纯粹的appendChil时，您正在从其父级切割确切的元素。添加cloneNode以复制这些元素：

var cards = document.getElementById("ustack1").children;
for(i=0;i<cards.length;i++){
  document.getElementById("stagingDiv").appendChild(cards[i].cloneNode(true));
}

最后，如果需要，您可以删除第一位父母的子女。

.children列表中的索引无法按预期工作

2 个答案: