Retrieve a Portion of HTML with jQuery

jQuery offers some really powerful functions and methods to utilize AJAX. One that I’ve discovered recently is the .find() method. The .find() method allows you to search for a specific HTML ID within some HTML and then returns only the content found within that ID.

For instance, if you have the following code:


<div id="header">This is a header</div>
<div id="main">
  <div id="content">This is my main content.</div>
  <div id="sidebar">This is a sidebar</div>
</div>
<div id="footer">This is my footer</div>

If you want to retrieve just the content inside of the “content” div, you could do that. If you want to retrieve just the content inside of the “main” div, you could do that, too.

Let’s start by looking at the AJAX code you might use to return the entire set of code for the page. For this example, let’s say that our page is called “test.html”. To retrieve that page using jQuery’s AJAX function, you would simply use some javascript similar to the following.

$.ajax({ url: 'test.html', dataType: 'html' });

Of course, all that’s going to do is retrieve the HTML code. It won’t actually do anything with it. If you want to actually do something with the code you retrieve, you need to use the “success” parameter of the AJAX method.

So, let’s say we just want to put the whole of the code we retrieved into our page somewhere. For this example, let’s say we want to output the code we retrieved into a div with the ID of “testDiv.”

$.ajax({ url: 'test.html', dataType: 'html', success: function(response) { $('#testDiv').html(response); } });

The code above will take all of the code you retrieved with your AJAX query and will output it into the testDiv.

Now, let’s say you just want to output the content of our “content” div into the “testDiv.” That’s where the .find() method comes into play. In order to do that, you would use code similar to the following.

$.ajax({ url: 'test.html', dataType: 'html', success: function(response) { $('#testDiv').html(jQuery(response).find('#content').html()); } });

Using that code, jQuery will automatically search for the HTML element with the ID of “content” and will parse the HTML code found within. It will then output that HTML into the element with the ID of “testDiv.”

You can find more information about the jQuery .ajax() method and the .find() method in the official jQuery documentation.

8 Responses

  • ProBackup

    In our case (jQuery version 1.4.3 on Firefox 9.0.1), loading jQuery’s ajax success response html into a jQuery object not only did request the html content but also tries to fetch an image referenced in the html.

    That is why we remove tags before loading the response data into the jQuery object.

    A piece of example code:

    jQuery(response.replace(/(]*?>)/gi,"")
  • saravanan

    Thanks Brother..It Works Fine..

  • Arman

    Thank you so much for the perfect tutorial!
    worked great!

  • Ali Lim

    Hi, Thank you for this tutorial. I have a question. What about a url like for example http://www.htmlcenter.com/blog/retrieve-a-portion-of-html-with-jquery/
    How can i parse the content? Best regards

    • Hi Ali, good you liked tutorial.
      As its explained in the post, you should first use $.ajax() method to retrieve HTML and then use .find method on response HTML and provide the id of the element you want to find in the HTML body.

  • tanvir rizvi

    Hi, Is it only for the static div content or also for dynamic div content ?