Separating HTML in Ajax request?

Separating HTML in Ajax request?

I'm using ajax like this (from the docs): 
  1. $.ajax({
     url: 'ajax/test.php',
     success: function(data) {
     // do something with data
     }
    });





The test.php prints a lot of HTML
  1. <div id="content1"><div id="test">test</div> testing more</div>
  2. <div id="content2">testing more</div>
  3. <div id="content3">testing more</div>

What I want to do is to fetch different parts of the HTML (in this example #content1, #content2, #content3) so I can update different parts of the page with the contents of these divs.

I cannot seem to figure out how do accomplish this...

  1. $(data).find('#content1').html();
returns null
  1. $(data).find('#test').html();
returns "test"


Does anyone have any idea how to get the html inside each #content or do I need to use a different approach altogether? What I basically want to do is to be able to print a lot of HTML in the file, and then in the "success" update different parts of the current page with parts from that HTML.

Thanks in advance =)