Это немного устарело, но так как «Загрузка шаблона HTML с помощью JavaScript» в наши дни должна относиться к загрузке HTMLTemplateElement, здесь представлен более современный подход к загрузке шаблонов natives с помощью javascript, который также работает в вашем случае использования.
Прежде всего, использование <template> уже лучше, чем загрузка HTML в скрытый DIV, потому что шаблоны являются внутренними и не отображают контент.Вы можете получать шаблоны с самого начала и использовать их в любое время.
<html>
<head>
<template>My template</template>
</head>
<body>
<script>
document.body.append(
document.importNode(
document.querySelector('template').content,
true
)
)
</script>
</body>
</html>
Или создавать их динамически.
const template = document.createElement('template')
// modify the template's content
template.content.append(document.createElement('div'))
// add it to the document so it is parsed and ready to be used
document.head.append(template)
Поскольку мы хотим, чтобы содержимое шаблона былоПостроенный на основе некоторого текста, который мы получаем из сети, мы должны проанализировать его и добавить его к нашему template.content.
const text = fetchTemplateSomehowAsText('my-template.html')
const parsedDocument = new DOMParser().parseFromString(text, 'text/html')
template.content.append(parsedDocument.querySelector('#my-snippet'))
Если my-template.html уже входит в тег <template>, которого мы можем избежатьчасть создания элемента шаблона вручную, потому что DOMParser уже создает элемент шаблона для нас.
document.head.append(
new DOMParser().parseFromString(text, 'text/html')
.querySelector('template')
)
)
Этот - фрагмент, который я использовал для динамической загрузки шаблонов в документкоторый использует то, что я только что объяснил.