title: outerHTML and attribute updates
body: <p>I'm trying to get the HTML code as a string with the attribute updates.</p>
  
  <p>I've a <code>select</code> tag, whose options I update using JavaScript. </p>
  
  <p>By default, a first <code>option</code> is <code>selected</code> using the HTML attribute <code>selected="selected"</code>.</p>
  
  <p>If I unset <code>selected</code> from the first option using <code>option1.selected = false</code> and set <code>option2.selected = true</code> for the second <code>option</code>, and then call the <code>outerHTML</code> of a <code>select</code>, I get </p>
  
  <pre><code>&lt;select&gt;
      &lt;option selected="selected"&gt;one&lt;/option&gt;
      &lt;option&gt;two&lt;/option&gt;
      &lt;option&gt;three&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p>As you can see, <code>selected</code> attribute is still on the first <code>option</code>, while it has been moved to the second <code>option</code>. The expected result is </p>
  
  <pre><code>&lt;select&gt;
      &lt;option&gt;one&lt;/option&gt;
      &lt;option selected="selected"&gt;two&lt;/option&gt;
      &lt;option&gt;three&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p>Here's an example <a href="http://jsbin.com/adAbAMe/2/edit?html,js,console,output" rel="nofollow">http://jsbin.com/adAbAMe/2/edit?html,js,console,output</a> (click <code>run with js</code> to get a result) which shows, that if a <code>selected</code> attribute has been changed, it doesn't change in the HTML code.</p>
  
  <p>But I need to get the final HTML from outerHTML with the successful attribute updates, because if I move this <code>select</code> somewhere I won't get any updates I've made before using JavaScript.</p>
  
  <p>Is there any method to get the HTML as a string with the real attributes values?</p>