title: How to dynamically load content into DIV using Javascript
body: <p>I have a website which consists of 5 different pages. </p>
  
  <p>To maintain the design of all the pages, I copied and pasted the code from the main page to all the other HTML documents to make sure that the Navigation Box and the main divs stay in position. </p>
  
  <p>I've now been asked to implement the design in such a way where when I press a button, the other HTML pages will load dynamically onto my main index page. This way, if I need to change the design of the pages, I only have to change the index page and not have to repeat those changes for every single HTML document I have. </p>
  
  <p>I've tried using Javascript for this, but I can't think of anything that would suffice. I can't understand jQuery at all, if someone has a clear understanding of how to accomplish this task using jQuery or Javascript, could you please explain it to me step by step?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;link rel="stylesheet"
  type="text/css"
  href="CSS/Index.css"&gt;
  
  &lt;/head&gt;
  &lt;script src="websitescript.js"&gt; &lt;/script&gt;
  &lt;body&gt;
  &lt;div class="mainwrapper"&gt;
  &lt;div class="navbox"&gt; 
  &lt;input type="image" id='about' src='images/about.jpg' 
  onclick="myFunction()"&gt; &lt;/a&gt; 
  &lt;a href="location.html"&gt; &lt;img src='images/location.jpg' class="location"&gt; 
  &lt;/a&gt; 
  &lt;input type="image" id='contact' src='images/contact.jpg' 
  onclick="myFunction()"&gt; &lt;/a&gt; 
  
  &lt;a href="inquiries.html"&gt; &lt;img src='images/inquiries.jpg' class="inquiries"&gt; 
  &lt;/a&gt;
  
  &lt;a href="employees.html"&gt; &lt;img src="images/employees.jpg" class="employees"&gt; 
  &lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;img src="images/duo.jpg" class='logo'&gt;
  
  &lt;div id="header"&gt; 
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>