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!

Menztrual · Accepted Answer · 2012-05-22 01:48:50Z

2

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();

answered May 22, 2012 at 1:48

Menztrual

41.7k12 gold badges59 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sir Over a year ago

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

Itay Moav -Malimovka · Accepted Answer · 2012-05-22 01:49:31Z

0

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.

answered May 22, 2012 at 1:49

community wiki

Itay Moav -Malimovka

Comments

Sampson · Accepted Answer · 2012-05-22 01:50:31Z

0

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

answered May 22, 2012 at 1:50

Sampson

269k76 gold badges546 silver badges570 bronze badges

Collectives™ on Stack Overflow

Load html file into a div with javascript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related