title: change parent -> childs to childs javascript
body: <p>Have a code with One Parent and 8 childs, I want childs class "b" to be in childs class "a".
  Have a code with parentElement class and 8 childs, I want childs class "secondElement" to be in childs class "firstElement".
  Have JS code that can fix it, but there isa bug because elements get appended to each other in random way.
  The code: </p>
  
  <pre><code>&lt;div class="parentElement"&gt;
  
  &lt;a class="firstElement"&gt;
  &lt;/a&gt;
  &lt;div class="secondElement"&gt;
  &lt;/div&gt;
  
  &lt;a class="firstElement"&gt;
  &lt;/a&gt;
  &lt;div class="secondElement"&gt;
  &lt;/div&gt;
  
  &lt;a class="firstElement"&gt;
  &lt;/a&gt;
  &lt;div class="secondElement"&gt;
  &lt;/div&gt;
  
  &lt;a class="firstElement"&gt;
  &lt;/a&gt;
  &lt;div class="secondElement"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>After JS work:</p>
  </blockquote>
  
  <pre><code>&lt;div class="parentElement"&gt;
  
  &lt;a class="firstElement"&gt;
     &lt;div class="secondElement"&gt;
     &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;a class="firstElement"&gt;
     &lt;div class="secondElement"&gt;
     &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;a class="firstElement"&gt;
     &lt;div class="secondElement"&gt;
     &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;a class="firstElement"&gt;
     &lt;div class="secondElement"&gt;
     &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>Here is snippet with my code implementation.</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getElement() {
          var parent = document.getElementsByClassName('parentElement')
          for(var i = 0; i &lt; parent.length; i++)  
        var parentLength = parent[i];
  
     var firstElements =  parentLength.getElementsByClassName('firstElement'),
               firstElementsLength = firstElements.length,
      secondElements =  parentLength.getElementsByClassName('secondElement');
           
           while(firstElementsLength--) {
               var secondElementsLength = secondElements.length;
               while(secondElementsLength--) {
    firstElements[firstElementsLength].appendChild(secondElements[secondElementsLength]);
               }
           }
   }
  
   getElement();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parentElement"&gt;
  
      &lt;a class="firstElement"&gt;
        firstElement1
      &lt;/a&gt;
      &lt;div class="secondElement"&gt;
        secondElement2
      &lt;/div&gt;
  
      &lt;a class="firstElement"&gt;
        firstElement1
      &lt;/a&gt;
      &lt;div class="secondElement"&gt;
        secondElement2
      &lt;/div&gt;
        
      &lt;a class="firstElement"&gt;
        firstElement1
      &lt;/a&gt;
      &lt;div class="secondElement"&gt;
        secondElement2
      &lt;/div&gt;
  
      &lt;a class="firstElement"&gt;
        firstElement1
      &lt;/a&gt;
      &lt;div class="secondElement"&gt;
        secondElement2
      &lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>