title: insert XML into DOM leads to not working class/id selectors
body: <p>I'm trying to load an XML file with ajax and insert parts of this XML DOM document into the browsers HTML DOM.</p>
  
  <p>This works so far, but when I try to get an inserted element with a class or id selector with jquery it returns the empty list.</p>
  
  <p>I tried it only in firefox 10 so far. does anyone have a clue why this might be? is it just not safe to do so?</p>
  
  <p>test.html:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;title&gt;dom test&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
      $(function() {
        var xml = null;
        $.ajax({
          type : "GET",
          async : false,
          url : 'test.xml',
          dataType : "xml",
          success : function(data) {
            xml = data;
          }
        });
  
        $('body').html($(xml).children().clone());
  
        console.log($('h1')); // prints the h1 element
        console.log($('.title')); // prints empty list
  
        console.log($('p')); // prints the p element
        console.log($('#content')); // prints empty list
      });      
    &lt;/script&gt;
  &lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>test.xml:</p>
  
  <pre><code>&lt;div id="root"&gt;
    &lt;h1 class="title"&gt;Blabla&lt;/h1&gt;
    &lt;p id="content"&gt;
      Lorem ipsum
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>