How do I load html page content inside of an HTML div using jQuery/AJAX?

Question

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.

this is the html code I have so far:

  <!-- navigation bar -->
  <nav>
    <ul>
      <li><a href="#" data-target="home.html">HOME</a></li>
      <li><a href="#" data-target="work.html">MY WORK</a></li>
      <li><a href="#" data-target="about.html">ABOUT ME</a></li>
      <li><a href="#" data-target="services.html">SERVICES</a></li>
      <li><a href="#" data-target="contact.html">CONTACT ME</a></li>
    </ul>
  </nav>

  <!-- content div -->

  <div id="content">

  </div>

  <!-- footer -->
  <section>
  </section>
  <footer>
    <p>Copyright &copy; 2017, All Rights Reserved</p>
  </footer>
</div>

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jordi Kroon, Feb 10 '17 at 21:18
Possible duplicate of [Loading DIV content via ajax as HTML](http://stackoverflow.com/questions/21715493/loading-div-content-via-ajax-as-html) — Heretic Monkey, Feb 10 '17 at 21:39
@JordiKroon How so? There's not even any asynchronous code in the question. — Heretic Monkey, Feb 10 '17 at 21:40
@MikeMcCaughan Ajax stands for Async Javascript and XML. So TS clearly wants to load code from an asynchronous call. — Jordi Kroon, Feb 10 '17 at 22:31
@JordiKroon I'm well aware of what ajax means (having used it before it got that name). But that question is asking about how to return a response from an ajax call as the output of a function. This question is asking how to load HTML from a file into a document. The latter is a one-liner and doesn't require knowledge of the asynchronous nature of ajax. — Heretic Monkey, Feb 10 '17 at 22:36

score 2 · Accepted Answer · answered Feb 10 '17 at 21:36

You can try the following; here you are getting the contents of load.html and putting it inside the content div.

    <!-- navigation bar -->
          <nav>
            <ul>
              <li><a href="#" data-target="home.html">HOME</a></li>
              <li><a href="#" data-target="work.html">MY WORK</a></li>
              <li><a href="#" data-target="about.html">ABOUT ME</a></li>
              <li><a href="#" data-target="services.html">SERVICES</a></li>
              <li><a href="#" data-target="contact.html">CONTACT ME</a></li>
            </ul>
          </nav>

          <!-- content div -->

          <div id="content">

          </div>

          <!-- footer -->
          <section>
          </section>
          <footer>
            <p>Copyright &copy; 2017, All Rights Reserved</p>
          </footer>
        </div>

<script>
$( "#content" ).load( "/resources/load.html" );
</script>

score 0 · Answer 2 · answered Feb 10 '17 at 21:38

The jQuery code could look like this:

$('a').each(function(b,c){     //loop through each a element
  $(c).on('click',function(){   //add click event listener
      var link = $(this).attr('data-target');  //get the link from attribute
      $('#content').load(link);    //load the link's content into container
  });
});

It will loop through all a elements and get the link from data-target attributes. Just remember to add jQuery to your webpage.

How do I load html page content inside of an HTML div using jQuery/AJAX?

2 Answers2