訪問導入的本地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