Loading a HTML Document Without Using jQuery

programming
1

Hi everyone!
I get this question around loading a HTML page/document/file without using jQuery a whole lot, so I figured I’d quickly post something here for now before formally writing a tutorial about it :stuck_out_tongue:

The basic approach is similar to what I’ve outlined in the Making HTTP Requests tutorial:

var xhr = new XMLHttpRequest();
var container = document.querySelector("#container");
xhr.open('GET', "kenburns.htm", true);
xhr.send();

xhr.onreadystatechange = processRequest;

function processRequest(e) {
	if (this.readyState == 4) {
		container.innerHTML = xhr.responseText;
	}
}

We are loading a file called kenburns.htm into a DOM element whose id value is container. You can see a live version of this here: https://www.kirupa.com/html5/examples/loadHTML.html

Cheers,
Kirupa

1 Like
2

Or a more modern, cutting edge alternative:

async function loadHTMLInto (url, container) {
  const response = await fetch(url)
  container.innerHTML = await response.text()
}
loadHTMLInto('kenburns.htm', document.getElementById('container'))

:wink:

2 Likes