How to dynamically load content into DIV using Javascript

Question

I have a website which consists of 5 different pages.

To maintain the design of all the pages, I copied and pasted the code from the main page to all the other HTML

Answer 1

What you wanna do, is load content using AJAX (XmlHttpRequest). That means, you have just one page with layout, and content/other pages are loaded without the need of reloading the page.

For that, you can use jQuerys .load() function. Tl;dr; what you gonna do, is to have content of the website as simple html files, without layout (header etc), and using ajax you are gonna load it into the page.

Content of your main page index.html could look like this (I removed those images in nav bar)

  

    About
    Location
    Contact
    Inquiries
    Employees
  

  


  

    
  

So in the same folder, you will have those other content files, but without navigation, wrappings header etc. Just plain content like:

About page
Lorem Ipsum