How to include an html file code on clicking on a <li> using ajax and javascript?

Question

I have these elements in my html code :

<ul class='tabs'>
  <li data-file='home'><a>Home</a></li>
  <li data-file='contact'><a>Contact</a></li>
   ..
   ..
</ul>

and I have a <div> called content:

<div class='content'>
   //Homepage Content
</div>

Then I use Javascript to get the content of the clicked <li> using data-file and then add .html for it so it become like this contact.html .

var xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
                   if (xmlhttp.status == 200) {
                       document.getElementById('content').innerHTML = xmlhttp.responseText;

                   }
                   else if (xmlhttp.status == 400) {
                      alert('There was an error 400');
                   }
                   else {
                       alert('something else other than 200 was returned');
                   }
                }
            };

            xmlhttp.open("GET", file, true); // file is the variable 'contact.html'
            xmlhttp.send();

But I get an error :

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at XMLHttpRequest.xmlhttp.onreadystatechange 

Answer 1

Change your HTML to have an element with the specified ID

<div id='content'>
   //Homepage Content
</div>

Answer 2

<div class='content'>
   //Homepage Content
</div>

Above should be :

<div id='content'>
   //Homepage Content
</div>

Because here document.getElementById('content').innerHTML = xmlhttp.responseText; you are access the element using the ID attribute