Как добавить HTML из документа, загруженного с помощью AJAX?
Я пытаюсь добавить содержимое файла .html в тело моей главной страницы. По сути, я пытаюсь создать многократно используемый фрагмент html, который можно загрузить на любую страницу с помощью простой функции JavaScript.
Вот содержимое моей навигационной панели, содержимое, которое я хочу использовать повторно:
<div id = "navbar">
<div class = "Tab">
<h1>Home</h1>
</div>
<div class = "Tab">
<h1>Contact</h1>
</div
</div>
Это находится в файле с именем navbar.html
Теперь в моем основном index.html я хочу импортировать его, выполнив что-то вроде этого:
<head>
<script src = "importHTML.js" type = "text/javascript"></script>
</head>
<body>
<script type = "text/javascript">
importHTML("navbar.html");
</script>
</body>
Это должно позаботиться об импорте HTML в navbar.html.
Содержимое importHTML.js таково:
function importHTML(url_) {
var request = new XMLHttpRequest();
request.addEventListener("load", function(event_) {
//This is the problem line of code
//How do I get the contents of my response to act like an element?
document.body.appendChild(this.responseText);
}, false);
xmlhttprequest.open("POST", url_, true);
xmlhttprequest.send(null);
}
Итак, я предполагаю, что мой вопрос довольно прост: как мне преобразовать этот текст ответа в элемент HTML, чтобы я мог добавить все это в тело?