Home/ Questions/Q 979335
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T04:12:14+00:00

I have the following index.html page set-up: <html> <head> </head> <body> <div id=container> <div

  • 0

I have the following index.html page set-up:

<html>
  <head>
  </head>
  <body>
    <div id="container">
      <div id="header">
      </div>
      <div id="sidebar_menu">
      </div>
      <div id="thecontent">
        <div id="page_banner">
        </div>
        <div id="page_content">
        </div>
        <div id="page_footer">
        </div>
      </div>
    </div>
  </body>
</html>

In addition to this, I have several individual .html files that reflect an option in my sidebar menu, so when the user first lands on the page, they will see index.html file based on the above setup, ie. shows header/menu/the content and footer.

My question is, when the user clicks on say the “About Us” menu option, I actually want to just replace “thecontent” div with the contents of my about-us.html file but without reloading the header and sidebar menu. I just want the entire div “thecontent” to be replaced with the div “thecontent” from my about-us.html file.

Is this possible as like I said, I have several individual .html files and really don’t want to duplicate code like my sidebar menu in every page as only my content will be changing based on menu selection.

I looked at jQuery.load() from this tutorial.

I think though this will not work. Also saw the .replacewith() but unsure if this is correct and if it is, unsure how to use in my scenario to go off and replace div with an external .html file.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    jQuery’s load method has a special syntax that allows you to select what content you want to load from the URL you provide. You simply specify a CSS selector after your URL.
    (Read the documentation, under “Loading Page Fragments”)

    For example:

    $("#thecontent").load("about-us.html #thecontent");

    Hosted demo:

    http://jsbin.com/uvera3 (Editable via http://jsbin.com/uvera3/edit)

    • 0