Question

I’m trying to get the HTML of a specific div returned by a .get request (the .get request, returns HTML data with 3 divs with 3 different ids)

Here’s my code:

$.get("ajax/learn-more.html", function(data){
    var $response = $(data);
    alert($response.find('#main-images')); // <= prints [Object object]
    alert("Data Loaded: " + data); // <= displaysthe whole html of learn-more.html
    // how can I get the html of a div in learn-more.html with id="main-images" ???
});

EDIT:

The content of learn-more.html:

<div id="something" class="hero-unit span-one-third" style="position: relative;">
    Foo Bar
</div>

<div id="main-images" class="hero-unit span-one-third" style="position: relative;">
    <div id="learn-more-photo" class="span-one-third">
        <img class="thumbnail" src="http://placehold.it/300x180" alt="">
    </div>
</div>

<div id="learn-more">
:D
</div>

Answer 1

$response.find('#main-images') will return an empty jQuery object. None of the selected elements has a descendant with ID main-images. Instead, one of the selected elements is the one you are looking for.

To get the a reference to the div use .filter() ^[docs] instead :

$response.filter('#main-images');

If you want to get the HTML, append the content to an empty div first and remove the unwanted elements:

var container = $('<div />').html(data);
container.children().not('#main-images').remove();
var html = container.html();

or use a outerHTML plugin:

var html = $response.filter('#main-images').outerHTML();