loading div content from external with jQuery.load into own div

Let's say that I have two html pages that are identically designed, but have different content. I have the same div with the same id on both pages. How do I use jQuery.load (or what do I use) so that the div#conent does not get added into the div#content of the first page.

I've tried this:

  $("a#linkHome").click(function(){$("div#content").load('index.htm #content');});
  $("a#linkPage2").click(function(){$("div#content").load('page2.htm #content');});

... but it ends up adding another div to the already existing div!

<div id="content">
  <div id="content">
    Blah Blah Blah
  <div id="content">
13.10.2009 15:29:43

Try with:

  $("a#linkHome").click(function(){$("div#content").load('index.htm #content *');});
  $("a#linkPage2").click(function(){$("div#content").load('page2.htm #content *');});

in this way you get all elements inside the div#content but not the div itself.

13.10.2009 15:36:00
I was hoping it wasn't something so simple as this, but it worked wonderfully! I'm reminded that jQuery loads body * by default. So this makes lots of sense! Thanks!!
user189210 13.10.2009 15:45:23

Or you can try the opposite approach. Just add a wrapper div into your target page.

13.10.2009 15:40:19
the problem with this approach, I think, is that on a site that rich in content; It can and will get messy.
user189210 13.10.2009 15:43:31