1

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>
Improve this question

2 Answers 2

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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!!
0

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

Improve this answer

1 Comment

the problem with this approach, I think, is that on a site that rich in content; It can and will get messy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.