Using innerHTML property to display content of another html file?

Question

I am trying to set the innerHTML of one of my elements to the content of another html file that just displays plain text. Is this possible? The way I'm thinking of it is as follows, but obviously it will just set the text to that quote directly instead of displaying the contents of the file.

document.getElementById("myElement").innerHTML = "directory/file.html"

Answer 1

You can do an ajax call to get the files contents and put them in the html on success.

var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('get', 'directory/file.html', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) { 
        document.getElementById("myElement").innerHTML = xhr.responseText;
    } 
}
xhr.send();

Or using jQuery, the load() method is made for you:

$( "#myElement" ).load( "directory/file.html" );