javascript - 将元素数组添加到dom

Question

我有 5 div's在 HTML 中创建，我想将它们全部添加到 div 中我用 JavaScript 创建的包装器。我尝试遍历 5 div's通过 for-in循环，然后附加 div作为 wrapper 的 child .

出于某种原因，for循环改变 5 div's顺序并没有将它们全部附加到 wrapper 中.如何添加所有 div's至 wrapper ，保持 (HTML) 顺序，使用 JavaScript？

(请不要发布 JQuery 答案，因为这不是问题。我想要 JavaScript 答案仅。)

JSFiddle

var wrapper = document.createElement('div'),
  myClass = document.getElementsByClassName('myClass');

myClass[0].parentElement.appendChild(wrapper);
wrapper.id = 'wrapper';

for (var key in myClass) {
  if (!myClass.hasOwnProperty(key)) continue;

  wrapper.appendChild(myClass[key]);
}

#wrapper {
  border: 2px solid green;
  color: brown;
}

<div class="myClass">First</div>
<div class="myClass">Second</div>
<div class="myClass">Third</div>
<div class="myClass">Fourth</div>
<div class="myClass">Fifth</div>

Answer 1

document.getElementsByClassName方法返回 HTMLCollection -object，类似于数组，因为它有应该使用的数字键。

例如for (var i = 0; i < myClass.length; ++i)

一旦您使用增量数字索引，您会发现它实际上与您的 key in myClass 行为相同，这是相当合乎逻辑的，因为 key 是数字索引。

正在发生的是 HTMLCollection 按文档顺序表示元素(所谓的事件列表，它反射(reflect)了 DOM 中的变化)并且您通过将它们附加到包装元素来移动它们(因此HTMLCollection 内的顺序也发生变化)。

有几个技巧可以解决这个问题，最接近您当前设置的一个是遍历 HTMLCollection从头到尾和insertBefore而不是 appendChild

for (var len = myClass.length - 1; len >=0; --len) {
    wrapper.insertBefore(myClass[len], wrapper.firstChild);
}

insertBefore fiddle

之所以可行，是因为包装器(在您的示例中)在您要移入其中的元素之后，因此不会更改元素的顺序。

还有另一种(更简单的)方法: document.querySelectorAll . querySelectorAll方法返回一个(静态)NodeList ，因此您可以安全地假设在您移动节点时顺序不会改变。

语法(恕我直言)比 getElementsByClassname 更方便, 因为它使用 CSS Selectors (很像流行的javascript框架我们就不提了)

querySelectorAll fiddle