向dom添加元素数组

Question

我div's用 HTML 创建了5 个，我想将它们全部添加到div我用 JavaScript 创建的包装器中。我想从5循环div's通过一个for-in循环，然后追加div为一体的一个孩子wrapper。

出于某种原因，for循环更改了 5 个div's顺序，并且不会将所有顺序都附加到wrapper. 如何使用 JavaScript将所有内容添加div's到wrapper，保持（HTML）顺序？

（请不要发布 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 是数字索引。

发生的事情是 an以文档顺序HTMLCollection表示元素（所谓的live list，它反映了 DOM 中的更改），并且您通过将它们附加到包装器元素来移动它们（因此更改中的顺序也是如此）。HTMLCollection

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

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

insertBefore 小提琴

这是有效的，因为包装器（在您的示例中）在您移动到其中的元素之后，因此不会更改元素的顺序。

还有另一种（更简单的）方法：document.querySelectorAll. 该querySelectorAll方法返回 a (static) NodeList，因此您可以放心地假设在移动节点时顺序不会改变。

语法（恕我直言）比getElementsByClassname,更方便，因为它使用CSS Selectors（很像我们不会提到的流行的 javascript 框架）

querySelectorAll 小提琴