How to load an HTML fragment with JQuery ajax()?

Question

Please can someone tell me how to extract the content from a div on another page using the JQuery ajax() method?

anotherpage.html

<html>
<head></head>
<body> 
<div id="content">I want to extract this element</div>
</body>
</html>

I've tried:

$.ajax({
url: "anotherpage.html #content",
dataType: "html"
}).done(function(data){
$("#results").html(data);
})

But it returns the complete page and not just the #content fragment.

NOTE: I know how to get it working with the load() shorthand but I'd like to know how to do it with the ajax() method.

Thanks in advance.

Nikola Mitev · Accepted Answer

try with this

 $('#results').load("anotherpage.html #content");

also visit "Loading Page Fragments" here jquery load api.

Donate For Us