Использование свойства innerHTML для отображения содержимого другого html-файла?

Question

Я пытаюсь установить innerHTML одного из моих элементов на содержимое другого html-файла, который просто отображает простой текст. Это возможно? То, как я об этом думаю, выглядит следующим образом, но очевидно, что он просто установит текст в эту цитату напрямую, вместо того, чтобы отображать содержимое файла.

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

Answer 1

Вы можете сделать ajax вызов, чтобы получить содержимое файлов и поместить их в HTML на успех.

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(); 

Или с помощью JQuery, метод load() сделал для вас:

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

Answer 2

Вы можете использовать iframe тег:

<iframe id="myHtml" src="directory/file.html"></iframe> 

Вы можете легко изменить содержание iframe «s по просто измените его атрибут src (он будет автоматически обновляться):

document.getElementById('myHtml').src = 'other_file.html'; 

Если вы хотите использовать innerHTML для отображения HTML из строки, вы можете использовать iframe «S srcdoc атрибутов (переопределяет атрибут src):

document.getElementById('myHtml').srcdoc = '<div><p>Some HTML</p></div>';