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? — Jordi Kroon
– Jordi Kroon, Commented Feb 10, 2017 at 21:18
@JordiKroon How so? There's not even any asynchronous code in the question. — Heretic Monkey
– Heretic Monkey, Commented Feb 10, 2017 at 21:40

sparta93 · Accepted Answer · 2017-02-10 21:36:42Z

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>

Paweł · Accepted Answer · 2017-02-10 21:38:00Z

0

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.

answered Feb 10, 2017 at 21:38

Paweł

4,5566 gold badges26 silver badges42 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related