Retrieving information from DOM elements returned using ajax

Question

I am new(ish) to jQuery and am testing out the extraction of DOM element data using jQuery.

Below, detailed on the firebug console I tried to extract data 10 different ways (from 1- to 10-) using data returned directly from the ajax request (rtnData).

And then to compare, I wrapped (rtnData) in a div to make it a jQuery object, and stored it in $test, (var $test= $('<div/>').html(rtnData);)

Displayed below in Firebug Console Output, I cant figure out is why 5- return's nothing and e- returns the center tag contents. Same with 8- and e-, they both look for #ticker div id but 8- returns nothing and e- returns the correct html?? Also when searching for h1 tag .text(), why does 10- return blank and j- return the correct data?

Thanks, Nic.

---

Use the following page to run the ajax request below in Firebug Console: http://www.liamharding.com/pgi/pgi.php

jQuery code ran using Firebug Console:

$.ajax({
  url:  'pgiproxy.php',
  type: 'POST',
  dataType: 'html',
  data: ({ data : $("#formdata").serialize(), mode : "graph"}),
  success: 
    function(rtnData){
        console.log("0- ", rtnData);
        console.log("1- ", $('img', rtnData));
        console.log("2- ", $('a', rtnData));
        console.log("3- ", $('span.cr', rtnData));
        console.log("4- ", $('span.cr', rtnData).html());
        console.log("5- ", $('center', rtnData));
        console.log("6- ", $('table', rtnData));
        console.log("7- ", $('#ticker_data', rtnData)); 
        console.log("8- ", $('#ticker', rtnData));
        console.log("9- ", $('#last', rtnData));
        console.log("10- ", $('h1', rtnData).text());

        var $test= $('<div/>').html(rtnData);

        console.log("z- ", $test);
        console.log("a- ", $('img', $test));
        console.log("b- ", $('a', $test));
        console.log("c- ", $('span.cr', $test));
        console.log("d- ", $('span.cr', $test).html());
        console.log("e- ", $('center', $test));
        console.log("f- ", $('table', $test));
        console.log("g- ", $('#ticker_data', $test));
        console.log("h- ", $('#ticker', $test)); 
        console.log("i- ", $('#last', $test));
        console.log("j- ", $('h1', $test).text());

    },
  error:
    function(){
      alert('ERROR');  
    }
});

Firebug Console Output:

1-  jQuery(img#GnuPlotChart 624e4629...8946.gif)
2- jQuery(a.button javascri...eload();, a.button javascri...close();)
3- jQuery(span.cr)
4- <span class="tl"></span><span class="tr"></span><span class="bl"></span><span class="br"></span>
5- jQuery()
6- jQuery(table.rbox-table)
7- jQuery(div#ticker_data.rbox)
8- jQuery()
9- jQuery(th#last, td#last.num)
10-
z- jQuery(div)
a- jQuery(img#GnuPlotChart 624e4629...8946.gif)
b- jQuery(a.button javascri...eload();, a.button javascri...close();)
c- jQuery(span.cr)
d- <span class="tl"></span><span class="tr"></span><span class="bl"></span><span class="br"></span>
e- jQuery(center)
f- jQuery(table.rbox-table, table)
g- jQuery(div#ticker_data.rbox)
h- jQuery(div#ticker)
i- jQuery(th#last, td#last.num)
j- Legacy Charts