title: Wrapping element inside div
body: <p>Lets assume I have few children <code>divs</code> inside some div</p>
  
  <p><a href="https://i.stack.imgur.com/GEQEO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GEQEO.png" alt="enter image description here"></a></p>
  
  <p>and I want the red one to be wrapped inside new parent <code>div</code> but maintain hierarchical order (not appending as a last child, in this case the third child).</p>
  
  <p><a href="https://image.prntscr.com/image/oKppxM4sQFiHzEKnZc9kEA.png" rel="nofollow noreferrer"><img src="https://image.prntscr.com/image/oKppxM4sQFiHzEKnZc9kEA.png" alt="enter image description here"></a></p>
  
  <p><strong>My approach:</strong></p>
  
  <pre><code>var red = document.getElementById('red');
  
  var parent = red.parentNode;
  
  var new_div = document.createElement('DIV');
  
  parent.appendChild(new_div);
  
  new_div.appendChild(red);
  </code></pre>
  
  <ol>
  <li>Find red element</li>
  <li>Go to parent node of red element</li>
  <li>Create new element as a child of step 2 but only know that that element will be last one (appendChild method)</li>
  <li>Append red element in that newly created div </li>
  </ol>
  
  <p>I guess in layman terms, I just want some element to be wrapped and that wrapping to have minimal consequences. Possibly in vanilla Javascript. </p>
  
  <p>Thank you.</p>