用JavaScript加载HTML模板_Javascript_Html_Templates

用JavaScript加载HTML模板

javascript html templates

用JavaScript加载HTML模板,javascript,html,templates,Javascript,Html,Templates,我正在努力寻找一个干净的方法来解决我的问题，我想知道是否有人能提供一些建议我有“templates.html”，其中包含一组html片段，我想将它们加载到JavaScript中并使用。记住templates.html不是加载的DOM文档，访问模板/代码段的好方法是什么我正在考虑使用document.open创建一个要访问的DOM，但我认为这在某些浏览器上有问题。您可以将html加载到一个隐藏的div中，然后您就可以访问DOM了将html加载到DIV的最简单方法是使用jquery加载：使用

我正在努力寻找一个干净的方法来解决我的问题，我想知道是否有人能提供一些建议

我有“templates.html”，其中包含一组html片段，我想将它们加载到JavaScript中并使用。记住templates.html不是加载的DOM文档，访问模板/代码段的好方法是什么

我正在考虑使用

document.open

创建一个要访问的DOM，但我认为这在某些浏览器上有问题。

您可以将html加载到一个隐藏的div中，然后您就可以访问DOM了将html加载到DIV的最简单方法是使用jquery加载：

使用jQuery和

.load（）

（ )方法将加载的文档注入DOM

$(function() {
    $('#content').load('/templates.html');
});

另一种方法是使用

对于简单的要求，您可以尝试：

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {     
        //do something with xhr.responseText
    }   
};      
xhr.open('GET', '/template.html');
xhr.send();

可以使用jquery ajax异步加载模板

$.get("/html/template01.html")
.done((data) => {
    console.info(data); // output the content of the html file
});

这有点陈旧，但因为现在的“用JavaScript加载HTML模板”应该指加载

HTMLTemplateElement

，这里有一种更现代的方法，可以用JavaScript加载本地模板，它也适用于您的用例

首先，使用

已经比将HTML加载到隐藏的DIV中要好，因为模板是内部的，不显示内容。您可以从一开始就呈现模板，并在需要时随时使用它们

<html>
<head>
  <template>My template</template>
</head>
<body>
  <script>
  document.body.append(
    document.importNode(
      document.querySelector('template').content,
      true
    )
  )
  </script>
</body>
</html>

因为我们希望模板的内容基于我们从网络上获得的一些文本来构建，所以我们必须解析它并将其添加到我们的

模板.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

已经包装在

标记中，我们可以避免手动创建模板元素，因为DOMParser已经为我们创建了模板元素

document.head.append(
  new DOMParser().parseFromString(text, 'text/html')
    .querySelector('template')
  )
)

是我用来将模板动态加载到文档中的一个片段，它使用了我刚才解释的内容。

Hi Andrei，谢谢你的回答，我并没有真正使用过requirejs，但我已经意识到了这一点，现在我有理由进行修补。。你可以用它动态加载很多东西，这很有用。我用它来编写coffeescript代码和模板。一些示例代码总是很好的。这就是为什么我更喜欢peterp的答案。我正在尝试将此方法合并到我的Flask应用程序中，但html文件无法加载。我真的非常感谢任何意见@Felipe答案是从2011年开始，你可以使用它，也可以不使用，但你不需要downvote@kleinohadjQuery已经被本机函数所取代，这使得答案过时了。在我看来，对于“用JavaScript加载HTML模板”的问题，它不再是公认的答案。这是我的解决方案，只是别忘了添加回调函数！因为如果你要添加功能，内容可能还没有加载，所以最好等一下$（'#content'）.load（'/templates.html'，function（）{//加载html时要做的事情}）；有没有可能在没有状态的情况下将模板“template01.html”连接到控制器（在controller.js（爱奥尼亚/科尔多瓦应用程序）中定义）上？SMH-有多少人给出了jQuery答案而不是Javascript答案，这让人很尴尬。自2011年以来发生了很大变化，所以现在，也许你想看看：

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)

const text = fetchTemplateSomehowAsText('my-template.html')
const parsedDocument = new DOMParser().parseFromString(text, 'text/html')
template.content.append(parsedDocument.querySelector('#my-snippet'))

document.head.append(
  new DOMParser().parseFromString(text, 'text/html')
    .querySelector('template')
  )
)