# Loading a HTML Document Without Using jQuery

**URL:** <https://forum.kirupa.com/t/loading-a-html-document-without-using-jquery/637015>\
**Category:** programming\
**Created:** [August 10, 2017, 8:18pm UTC](https://forum.kirupa.com/t/loading-a-html-document-without-using-jquery/637015 "2017-08-10T20:18:55Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 10, 2017, 8:18pm UTC](https://forum.kirupa.com/t/loading-a-html-document-without-using-jquery/637015/1 "2017-08-10T20:18:56Z")

</div>

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 😛

The basic approach is similar to what I’ve outlined in the [Making HTTP Requests tutorial](https://www.kirupa.com/html5/making_http_requests_js.htm):

```
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](https://www.kirupa.com/html5/examples/loadHTML.html)

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [August 11, 2017, 2:56am UTC](https://forum.kirupa.com/t/loading-a-html-document-without-using-jquery/637015/2 "2017-08-11T02:56:38Z")

</div>

Or a more modern, cutting edge alternative:

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

```

😉