title: how to extract nested html element to same level in js
body: <p>I use javascript and have a div element with some html tags inside it like below, some of the elements are nested and I want to keep them in the same level, first html is like this:</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-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;p&gt;
      some text on here 1
      &lt;i&gt;
        some italic 
        &lt;b&gt;text&lt;/b&gt;
        here
      &lt;/i&gt; text text text
    &lt;/p&gt;
    &lt;b&gt;
      some bold text on here
    &lt;/b&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I don't know how I can extract those nested elements and keep them on the same level, something like this:</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-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;p&gt;
      some text on here 1
    &lt;/p&gt;
    &lt;i&gt;
      some italic 
    &lt;/i&gt;
    &lt;b&gt;text&lt;/b&gt;
    &lt;i&gt;
      here
    &lt;/i&gt;
    &lt;p&gt;
      text text text
    &lt;/p&gt;
    &lt;b&gt;
      some bold text on here
    &lt;/b&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>update 1</h2>
  
  <p>The performance of the code is not too important!</p>