title: How do I load html page content inside of an HTML div using jQuery/AJAX?
body: <p>I want to load the contents of an html file (home.html) into a div container located inside of a main html file (index.html)after clicking on a link and I want to use jquery/ajax to do it. I have tried to find answers but have only come across answers pertaining to php and not html.</p>
  
  <p>this is the html code I have so far:</p>
  
  <blockquote>
  <pre><code>  &lt;!-- navigation bar --&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" data-target="home.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" data-target="work.html"&gt;MY WORK&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" data-target="about.html"&gt;ABOUT ME&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" data-target="services.html"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" data-target="contact.html"&gt;CONTACT ME&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  
    &lt;!-- content div --&gt;
  
    &lt;div id="content"&gt;
  
    &lt;/div&gt;
  
    &lt;!-- footer --&gt;
    &lt;section&gt;
    &lt;/section&gt;
    &lt;footer&gt;
      &lt;p&gt;Copyright &amp;copy; 2017, All Rights Reserved&lt;/p&gt;
    &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  </blockquote>