Load HTML File Contents to Div [without the use of iframes]
Wow, from all the framework-promotional answers you'd think this was something JavaScript made incredibly difficult. It isn't really.
var xhr= new XMLHttpRequest();
xhr.open('GET', 'x.html', true);
xhr.onreadystatechange= function() {
if (this.readyState!==4) return;
if (this.status!==200) return; // or whatever error handling you want
document.getElementById('y').innerHTML= this.responseText;
};
xhr.send();
If you need IE<8 compatibility, do this first to bring those browsers up to speed:
if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
window.XMLHttpRequest= function() {
return new ActiveXObject('MSXML2.XMLHttp');
};
}
Note that loading content into the page with scripts will make that content invisible to clients without JavaScript available, such as search engines. Use with care, and consider server-side includes if all you want is to put data in a common shared file.
jQuery .load()
method:
$("#y").load("x.html");
2019
Using fetch
<script>
fetch('page.html')
.then(data => data.text())
.then(html => document.getElementById('elementID').innerHTML = html);
</script>
<div id='elementID'> </div>
fetch needs to receive a http or https link, this means that it won't work locally.
Note: As Altimus Prime said, it is a feature for modern browsers