Load div on click only

JavaScript
4

Ok, well the difference is that jQuery is a library written in JavaScript, whereas JavaScript itself is a scripting language for browsers.
jQuery is often overkill for small projects, but it does offer a simplified syntax for AJAX stuff, so I’ll use it here.

What we need to do is to make a HTML template, include the jQuery library and attach an event handler to the link that will be responsible for loading the content into the div.

After that we need to create a file that will hold the content we will be loading.
I’ll call mine content.html.

Then we can use jQuery’s .load() method to load the content from content.html into the div.

The whole thing looks like this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery scaffold</title>
  </head>
  
  <body>
    <a href="#" id="myLink">Click me!</a>
    <div id="result">The text will get loaded here</div>
  
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      $("#myLink").on("click", function(){
        $("#result").load("content.html");
      });
    </script>
  </body>
</html>

You might also find this useful: http://api.jquery.com/load/