Load html file into a div with javascript?

Question

I have a div which I want to populate with different html files from my server. Is there a simple way to do this? All I ever find are jquery samples and I don't want to use a library.

I have tried this:

 document.getElementById('main').innerHTML = 'menu.html';

But that obviously just loaded text!

Answer 1

Some simple Ajax will do the trick for you. This is untested, but should give you the right idea:

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("main").innerHTML=xmlhttp.responseText;
 }
}
xmlhttp.open("GET","menu.html",true);
xmlhttp.send();

• Sir: is there any way to use that and still allow the script that was called to use variables from the main script =/ ?

Answer 2

Simplest way is to use a library, which the entire point of, they wrote the code for u. right? Use the jQuery example. It is as good as it gets.

Answer 3

Is there a simple way? No, not without a library. That being said, you can do it on your own if you choose - that might be all that's necessary for you to come crawling back into the arms of jQuery ;)

Resource: XHR on Mozilla Developer Network