Javascript 在模板中导入HTML模板_Javascript_Html_Html5 Template

Javascript 在模板中导入HTML模板

javascript html

Javascript 在模板中导入HTML模板,javascript,html,html5-template,Javascript,Html,Html5 Template,是否有在另一个HTML模板元素中使用HTML模板元素的示例好的，这里有一个简单的例子：这是我的主文件index.html，我在其中导入header.html并克隆其中的模板，并将其附加到我的masterdiv： <!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xhtml="http://www

是否有在另一个HTML模板元素中使用HTML模板元素的示例

好的，这里有一个简单的例子：

这是我的主文件index.html，我在其中导入header.html并克隆其中的模板，并将其附加到我的masterdiv：

<!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xhtml="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us">
<head>
   <meta content="text/html; charset=utf-8" http-equiv="content-type">
   <link id="imported-header" rel="import" href="static/components/header.html">
</head>
<body>
    <div class="master"></div>
</body>

<script>
    var headerImp = document.querySelector('#import-header').import;
    var headerTemp = headerImp.querySelector(".header");
    var header_01= headerTemp .content.cloneNode(true);
    document.querySelector(".master").appendChild(header_01);
</script>
</html>


var headerImp=document.querySelector（“#导入头”）.import；
var headerTemp=headerImp.querySelector（“.header”）；
var header_01=headerTemp.content.cloneNode（true）；
文档查询选择器（“主”）.appendChild（标题_01）；

然后在我的header.html中，我导入了另一个html并将其添加到模板中（我感觉调用另一个模板中的模板的文档是错误的，但我可能是错误的）：


var creditImp=document.querySelector（“#导入字段”）.import；
var creditTemp=creditImp.querySelector（“.field”）；
var credit_01=creditTemp.content.cloneNode（真）；
credit_01.querySelector（“.row”）.innerHTML=“User1”；
var credit_02=creditTemp.content.cloneNode（真）；
credit_02.querySelector（“.row”）.innerHTML=“User2”；
文件查询选择器（“贷方”）。附录子项（贷方01）；
文件。查询选择器（“贷方”）。附录子项（贷方02）；

这是credit_field.html只是一个保存字段的模板：

<template class="field">
    <div class="row"></div>
</template>

它显然是加载它没有任何错误，但它给了我导入错误！作为记录，如果我将它们都导入到index.html并将它们附加到index.html中，它会很好地工作，但我正在寻找一种方法，在另一个模板中包含一个模板

再次澄清我的问题，我想知道如何在另一个HTML模板元素中添加HTML模板元素

注意：我见过有人使用Django模板，但我想在HTML、JavaScript和jQuery中进行分类，以避免复杂性。

很简单，您可以对要用作模板的HTML页面进行ajax调用，然后将其放置在适当的节点上

<script type="text/javascript">
    $.ajax({
        url: 'static/components/credit_field.html',
        success: function(content) {
            $('template')[0].before(content);
        }
    });
</script>


$.ajax({
url:'static/components/credit_field.html'，
成功：功能（内容）{
$（'template'）[0]。在（内容）之前；
}
});

<script type="text/javascript">
    $.ajax({
        url: 'static/components/credit_field.html',
        success: function(content) {
            $('template')[0].before(content);
        }
    });
</script>