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:

$(document).ready(function(){
  $("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">
</div>
13.10.2009 15:29:43
2 ОТВЕТА
РЕШЕНИЕ

Try with:

$(document).ready(function(){
  $("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.

5
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.

0
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