title: Why getting an outer HTML does not work?
body: <p>I try to get the outer HTML in two different ways, based on <a href="https://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox">this question</a>. Unfortunately, none of them is giving the expected result:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='my_div'&gt;Hello&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function() {
      document.write('[' + $('#my_div').clone().wrapAll("&lt;div /&gt;").parent().get(0).innerHTML + ']&lt;br /&gt;');
      document.write('[' + (new XMLSerializer().serializeToString(document.getElementById('my_div'))) + ']');
  });
  </code></pre>
  
  <p>The output is:</p>
  
  <pre><code>[
  Hello
  ]
  [
  Hello
  ]
  </code></pre>
  
  <p>I expect the following result: <code>&lt;div id='my_div'&gt;Hello&lt;/div&gt;</code></p>
  
  <p><a href="http://jsfiddle.net/wkKwY/" rel="nofollow noreferrer">Live example here</a></p>
  
  <p>What am I doing wrong ?</p>