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);
}