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"
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" );
You can use the iframe tag:
<iframe id="myHtml" src="directory/file.html"></iframe>
You can easily change the iframe's content by simply change it's src attribute (it will automatically update):
document.getElementById('myHtml').src = 'other_file.html';
If you also want to use innerHTML to display html from string, you can use the iframe's srcdoc attribute (overrides the src attribute):
document.getElementById('myHtml').srcdoc = '<div><p>Some HTML</p></div>';
