title: Javascript wrap element and insert at same position
body: <p>I have the following code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>this.newWrap = document.createElement("div");
  this.newWrap.classList.add('xxx');
  
  this.newWrap.appendChild(
      document.querySelector('.two')
  );
  
  document.querySelector('.wrap').insertBefore(
      this.newWrap,
      document.querySelector('.three')
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.xxx {
    background-color: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
      &lt;div class="one"&gt;One&lt;/div&gt;
      &lt;div class="two"&gt;two&lt;/div&gt;
      &lt;div class="three"&gt;three&lt;/div&gt;
      &lt;div class="four"&gt;four&lt;/div&gt;
      &lt;div class="five"&gt;five&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I would like to insert the <code>this.newWrap</code> at the same position the element it wraps is. So to say with the same selector I use to wrap the element in this case <code>document.querySelector('.two')</code> and not <code>document.querySelector('.three')</code> like seen in the <code>.insertBefore()</code></p>
  
  <p>How can I do that?</p>