title: Add array of elements to dom
body: <p>I have 5 <code>div's</code> created in HTML, and I want to add all of them into a <code>div</code> wrapper I created in JavaScript. I tried looping through the 5 <code>div's</code> via a <code>for-in</code> loop, then append the <code>div</code> as a child of the <code>wrapper</code>.</p>
  
  <p>For some reason, the <code>for</code> loop changes the 5 <code>div's</code> order and doesn't append all of them in <code>wrapper</code>. How can I add all <code>div's</code> to <code>wrapper</code>, keeping the (HTML) order, using JavaScript?</p>
  
  <p>(Please don't post JQuery answers because that isn't the question. I want JavaScript answers <strong>only</strong>.)</p>
  
  <p><a href="https://jsfiddle.net/byd9fer3/" rel="noreferrer"><h3>JSFiddle</h3></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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]);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
    border: 2px solid green;
    color: brown;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="myClass"&gt;First&lt;/div&gt;
  &lt;div class="myClass"&gt;Second&lt;/div&gt;
  &lt;div class="myClass"&gt;Third&lt;/div&gt;
  &lt;div class="myClass"&gt;Fourth&lt;/div&gt;
  &lt;div class="myClass"&gt;Fifth&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>