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

Question

I have a div with the id of "secondHeader" and I want to replace that entire div with another div with the same id of "secondHeader" but instead of replacing it , it just adds the loaded div inside the first one.

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

This is what happens...

<div id="secondHeader"><div id="secondHeader"></div></div>

What I want to happen is the secondHeader div from the ajax load to totally replace the secondHeader in the initial page.

I know it sounds dumb, but here's what I'm trying to accomplish...When a user is not logged in, they see a non-logged in header. I am using ajax to allow the person to log into the site and I want to replace the non-logged in header with the logged in one via ajax.

I have tried everything I know such as...

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

...and using .remove() before hand...

Any ideas?

Answer 1

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.