find functions differs in behavior depening on previous html call

find functions differs in behavior depening on previous html call

Does any body know why the find function it not returning 1 after calling the html function with a jquery xml object?

Here is an example, I expect both time xmlLength and stringLength to be 1.  However by the time the script ends, xmlLength is 0 and stringLength is 1, even though I can see the affects of the xml insertion in the browser while I am debugging it. 


I have code like this that sets up an html template, then I populate the template using json data.  However I switched everything over to xml and now I cannot populate the tempalte with the json data because jquery says it is not there. 

https://gist.github.com/raw/3805239/828bff46bf2097cfc0a2e64d298a3fca22ef6846/test.html

<!DOCTYPE html>
<html>
<head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" >
        $(document).ready(function(){
            var $xml = $($.parseXML("<body><div class='target'>text from xml</div></body>"));
            var xmlLength = $xml.find('.target').length
            $(".xml").html($xml.find('body').contents());
            timelineXMLLength = $(".xml").find('.target').length

            $(".string").html("<div class='target'>text from string</div>");
            var stringLength = $(".string").find('.target').length;
        });
    </script>
</head>

<body >
    <div class="string" ></div>
    <div class="xml" ></div>
</body>

</html>