How can I use jQuery.load to replace a div including the div

Question

Could you refine your selector in the load() method?

For example,

$("#secondHeader").load("/logged-in-content.html #secondHeader > *");

This way, you're not grabbing the div itself, you're grabbing its contents.

I think the best way is to use get instead of load. In your case you can do like this:

$.get("/logged-in-content.html #secondHeader", function(data) {
     $("#secondHeader").replaceWith(data);
});

[Edit: removed a paren]

Update: If /logged-in-content.html has more than just the code you need, you can wrap the returning data in another jQuery object and use .find() to extract the container. Try this:

$("#secondHeader").replaceWith($(data).find("#secondHeader"));

Another way that worked best for me:

$('#div_to_replace').load('/ajax/loader', function() {
    $(this).children(':first').unwrap();
});

Final Answer:

$.fn.loadWith = function(u){var c=$(this);$.get(u,function(d){c.replaceWith(d);});};
$("#test").loadWith("somelink.html");

jQuery load adds the response INTO the element selected. jQuery's replaceWith REPLACES the selected element.

<div id="curElement">start</div>

$("#curElement").load("somelink.html");
will result in:
<div id="curElement">What ever was in somelink.html</div>


$("#curElement").replaceWith("somelink.html");
will result in:
What ever was in somelink.html

I suggest adding a function to jQuery that does both:

$.fn.loadWith = function(u){
    var c=$(this);
    $.get(u,function(d){
        c.replaceWith(d);
    });
};
$("#test").loadWith("somelink.html");

Using $.get() worked for me but I had to extract the container from the response document first:

$.get("/page.html", function (data) {
    var elem = $(data).find('#container');
    $("#puthere").replaceWith(elem);
});

I always have a jQuery function defined like this:

    jQuery.fn.loadOuter = function( url, callback )
    {
        var toLoad = $(this);
        $.get(url, function( data ) {
            toLoad.replaceWith( data );
            if (callback != null && callback != undefined)
                callback();
        });
    }

Then I can either say

$(...).load(url)

or

$(...).loadOuter(url)

The second one does what you want to do. I also have a function called loadInner which just calls load for what its worth.