Fatal编程技术网
  • javascript/
  • Javascript 子列表中的索引未按预期工作

Javascript 子列表中的索引未按预期工作

javascript html

Javascript 子列表中的索引未按预期工作,javascript,html,Javascript,Html,有人能解释一下为什么要使用给定的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&g

有人能解释一下为什么要使用给定的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>


第1区：
0
1.
2.
3.
4.
5.
6.
7.
8.
9
10
第2区：
以及相应的javascript

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

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

var cards=document.getElementById（“ustack1”）.children；

对于（i=0；i
cards
是一个实时HTMLCollection。当您执行
appendChild
时，您将节点移动到DOM中的另一个位置，从而将其从集合中移除。一种解决方案是只需在cards上迭代，直到其长度为零：


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


这是最新的提琴：


如果这让您感觉更好，那么这是我们很多人曾经犯过的错误；-）使用浏览器调试器是了解此类问题的根本原因的好方法。
当您使用纯appendChil时，您正在从其父元素中剪切确切的元素。添加
cloneNode
以复制该元素：


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



var cards=document.getElementById（“ustack1”）.children；
对于（i=0；i