title: Unwrap element without jQuery and using createElement
body: <p>With jQuery it's really easy unwrap elements but with pure JS it's not that easy. I spent the last 2 hours trying but no result. I read ALL the topics on Google and SO and no solution. Most of them use jQuery, others are not cross browsing.</p>
  
  <p>So far I have:</p>
  
  <pre><code>    var temp = document.createElement("div");
      temp.innerHTML = "HERE COMES A COMPLEX HTML WITH SEVERAL DIVS, SPANS...";
      document.insertNode(temp);
  </code></pre>
  
  <p>The problem is that my HTML code is being inserted with the "div" surrounding it. I need to remove this div from being parent. I made an attempt that maybe is a clue but so far not helping:</p>
  
  <p>Instead of:</p>
  
  <pre><code>document.insertNode(temp);
  </code></pre>
  
  <p>I use</p>
  
  <p>document.insertNode(temp.firstChild);</p>
  
  <p>The problem is that only the firstChild is being inserted in the document.</p>
  
  <p>You may say it is useless what I need but it's not! I have a <a href="http://www.sitepor500.com.br" rel="nofollow" title="Optimize criação site to make faster">website</a> which (as you can see) is veeery loaded, full of css effects and as you scroll down the page it gets more loaded and loaded. If I could unwrap this outer div it would be great since I will insert at least 120 commponents in the website.</p>
  
  <p>I am optimizing this websit traffic to balance it, so I will make it all script. There will be minimal html. All the images and remaining divs will be inserted using this method, so at the end I will not want 120 useless divs in the DOM that could have been removed. I have my reasons so I am here not to discuss the why, but I need to unwrap the div.</p>
  
  <p>OBS: there is method that is using outerHTML = innerHTML but it repaints all the page everytime it's called. So it's a terrible idea.</p>