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

但是由于您要附加所有元素，因此这没有多大意义，因为只是在andj之间来回弹跳。0-1

因为您要添加所有元素，所以只要索引处有东西，您就可以简单地运行循环0...

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