jQuery AJAX : How to query an returned HTML document

Question

My question is as follows: I have started using the $.ajax function with jQuery and I am wondering how I work with the return of an HTML page. The request completes and I can console.log the returned HTML page however I would now like to select a single element from that page. I have had several attempts which included:

$(data).find('p');

$('button').click(function() {

  $.ajax(funciton() {
  dataType: 'html',.
  url: 'localhost/sw',
  success: function(data) {
      // This is where I would like to select a element or node from the complete
      // returned html document
 });

});

I know i can simply use .load() which you can provide select criteria but .ajax is the root function to begin with and I would like to learn that way as well for more complicated queries. Second half of this would be should I not be trying to select elements this way and just serve up json or a single key phrase instead of the entire html page? All help is appreciated.

Answer 1

Just pass the returned HTML to jQuery, and treat it like a regular jQuery collection:

$.ajax({
    dataType: 'html',.
    url: 'localhost/sw',
    success: function (html) {
        var paragraphs = $(html).find('p');
        // Manipulate `paragraphs` however you like. For example:
        $(document.body).append( paragraphs );
    }
});

Answer 2

Joseph's answer above is correct if you just want to get the objects .

But if you want to load the content of that element, you may change this:
var paragraphs = $(html).find('p');
to
var paragraphs = $(html).find('p').html();

Hope it helps.