访问导入的本地HTML文件的DOM

Question

我正在一个项目中，我想使用JavaScript导入本地存储的HTML模板。

该模板将动态填充我通过访问网站REST API获得的数据。

这是我想做的一个例子：

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
</head>
<body>
    <div id="loaded-content">
        <!-- Here will be displayed the template -->
    </div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>

template.html：

<div id="data">
    <h1 id="data-name">value</h1>
    <p id="first-attribute">value</p>
    <p id="first-attribute">value</p>
    <p id="first-attribute">value</p>
</div>

datas.json：

{
    "datas":
    [
        {
            "name": "value",
            "first-attribute": "value",
            "second-attribute": "value",
            "third-attribute": "value"
        },
        {
            "name": "value",
            "first-attribute": "value",
            "second-attribute": "value",
            "third-attribute": "value"  
        }
    ]
}

对于数据中包含的每个对象，我想再次显示模板。

当前，我使用XMLHttpRequest对象加载模板。 我可以显示模板的内容，但是无法访问模板的DOM来更改其元素的值。

我应该使用哪种方法正确加载HTML文件？ 我正在寻找纯JavaScript的东西（没有jQuery之类的东西）。

谢谢您的帮助=）

Answer 1

您的直接问题是，当前的模板将导致多个具有相同ID的元素，这是不允许的。

如果您可以控制模板，则将其更改为更传统的模板样式，其中将括号括起来而不是依靠HTML ID。 因此，我将您的模板更改为：

<div>
    <h1>{{name}}</h1>
    <p>{{first-attribute}}</p>
    <p>{{second-attribute}}</p>
    <p>{{third-attribute}}</p>
</div>

这样，我们可以通过REGEX运行字符串替换，而不是通过ID输出然后查询这些项。

假设#content是模板的容器元素， data存储已解析的JSON数据， template存储未解析的模板字符串：

var
cntr = document.querySelector('#content'),
html;

//iterate over data items
data.datas.forEach(function(obj) {

    //grab all var references i.e. {{foo}} and replace them with actual values, if exist
    html = template.replace(/\{\{[^\}]+\}\}/g, function(match) {
        var var_name = match.replace(/^\{\{|\}\}$/g, '');
        return obj[var_name] || '??';
    });

    //append the readied HTML to the content container
    cntr.innerHTML += html;
});

Answer 2

这是一个例子。 您可以使用JSON解析器以所需的格式获取数据。 因此，您可以执行以下操作：创建一个虚拟<div> DOM元素以稍后推送，使用replace函数将val替换为data变量的值。 然后，最后将其附加到HTML的div元素。 如果使用XMLHttpRequest获得数据，则将数据传递给template 。 然后，将占位符value替换为解析JSON中的数据。 并使用replace方法来做到这一点。 它应该工作正常。

 var template = document.createElement("div"); var data = "Hello world"; template.innerHTML = "<h1>val</h1>"; template.innerHTML = template.innerHTML.replace("val", data); document.getElementById("myDiv").appendChild(template);

 <div id="myDiv"> </div>

访问导入的本地HTML文件的DOM

问题描述

2 个解决方案

解决方案1
0 已采纳 2018-01-19 11:17:29

解决方案2
0 2018-01-19 11:19:11

访问导入的本地HTML文件的DOM

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-01-19 11:17:29

解决方案2 0 2018-01-19 11:19:11

解决方案1
0 已采纳 2018-01-19 11:17:29

解决方案2
0 2018-01-19 11:19:11