title: Why HIERARCHY_REQUEST_ERROR (3) when adding div to div on IE
body: <p>I'm using jQuery 1.5.2 trying to dynamically load a div from one source into a div in my container document. When I load the document on Firefox 4, the document loads with the message "Got it!", but when I load it on IE9, I get an HIERARCHY_REQUEST_ERROR when it attempts to <code>.append()</code> the one div to another.</p>
  
  <p>Here is the container:</p>
  
  <pre><code>&lt;!DOCTYPE html 
       PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/static/harness-script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div id="main_cont"&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the harness-script:</p>
  
  <pre><code>function load_stuff(widget_source) {
      var node = $(widget_source.documentElement).clone();
      // add the node to the main content
      $('#main_cont').append(node);
  }
  
  // Load and init the widget
  $(document).ready(function() {
      resp = $.get(
          '/static/widget.xhtml',
          load_stuff
      );
  });
  </code></pre>
  
  <p>The widget.xhtml is very simple:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;div&gt;
    Got it!
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I re-write this such that it works cross-browser?</p>