Dynamically fill div with same ID using jQuery

Question

I am using History.js to dynamically fill the body of my html pages in order to prevent entire page refreshes. However, I am having trouble getting data and filling a div if they are the same ID. All of my pages are structured:

<div id="content">
    <div id="container">
        ...

Here is my current jQuery/history.js

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();
    $.get(State.url, function(data) {
        $('#content').fadeTo(600, 0, function() {
            $('#content').html($(data).find('#container').html()).delay(200).fadeTo(600, 1);
        });
    });
});

I want to be able get data from 'content' and also fill the 'content' div, but when I change the variable in find() to 'content', it will return nothing.

Answer 1

Figured it out!

Was able to create a work around by using $(data).find('#container').parent().html()

Answer 2

Why you don't use something like this? :

$('#content').fadeTo(600, 0, function() {
        $(this).children('#container').html(data).delay(200).fadeTo(600, 1);
    });

Answer 3

you might want to try $(data).find('div[id=container]').html() instead of $(data).find('#container').html().

And you are trying to replace content div's html with container div's html. You will lose the container div