Add array of elements to dom
<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>