appendChild不正确

Question

如果我有：

<div id="mc"></div>

以及 ajax.responseText ：

<div id="mc">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

最后是我的Javascript代码：

var div = document.createElement("div");
div.innerHTML = ajax.responseText;
var divChildren = div.children;
for(var i = 0; i < divChildren.length; i++) {
  var root = divChildren[i];
  var children = root.children;
  var documentRoot = document.getElementById(root.id||"$");
  if(documentRoot) {
    var node = null;
    for(var j = 0; j < children.length; j++) {
      node = children[j];
      documentRoot.appendChild(node);
    }
  } 
}

结果为什么？ ：

<div id="mc">
  <div>1</div>
  <div>3</div>
  <div>5</div>
</div>

Answer 1

这是因为children是一个实时列表，这意味着当您将其中一个元素附加到其他位置时，它将从列表中删除。这会混淆前向迭代，除非每次删除索引时都会递减索引。

以下是两个示例解决方案......

你会递减j ...

for(var j = 0; j < children.length; j++) {
  node = children[j];
  j--;
  documentRoot.appendChild(node);
}

但是因为你要附加所有元素，所以这没有多大意义，因为j只是在0和-1之间来回反复。

因为你要添加所有元素，所以只要索引为0时就可以运行循环......

while(children[0]) {
  node = children[0];
  documentRoot.appendChild(node);
}