使用JavaScript在HTML中注入數據

Question

使用服務器端腳本，就像在這樣注入HTML（ASP.NET）中的數據一樣簡單：

//Assuming theTime is a variable
<h1>the time is, @theTime</h1>

---

但在JavaScript中，基本上需要：

創建一個元素：

<h1></h1>

給它一個ID：

<h1 id="whatever"></h1>

創建一個腳本標簽：

<script></script>

通過其ID找到該元素：

document.getElementById("whatever")

然后使用innerHTML修改它的內容：

document.getElementById("whatever").innerHTML = "Hi, " + TheTIme;

最終代碼：

<h1 id="whatever"></h1>
<script>
    document.getElementById("whatever").innerHTML = "Hi, " + TheTime;
</script>

---

是否有可能像在ASP.NET / PHP中那樣在JavaScript中注入值/數據？

編輯：變量是一個JS變量，從服務器獲取它是受控制的。

Answer 1

好吧，您可以使用一些模板庫（例如把手）並使用jquery來方便元素的選擇，例如：

<div id="target"></div>

<script id="hi-template" type="text/x-handlebars-template">
  Hi {{userName}}
</script>

<script type='text/javascript'>
    var template = Handlebars.compile($("#hi-template").html());
    $('#target').html(template({userName: "bob"}));
</script>

Answer 2

Javascript模板完全解決了將數據綁定到HTML元素的問題。

以下是目前使用的常見模板引擎：

• Underscore.js
• Handlebars.js
• Mustache.js

如果您正在尋找簡單的東西，請嘗試John Resig的微型模板引擎

Answer 3

<h1>Hi, @theUsersName</h1>

我從未使用過ASP.NET，但我認為@theUserName是一個變量。 如果是這種情況，則無法進行1比1的替換。 但是，它仍然有可能。

我不確定你是如何獲得用戶名的，但我認為你有辦法將它變成一個JavaScript變量。 在這種情況下，我建議這樣的事情：

 function changeName(username) { document.getElementById("username").innerHTML = username; } 

 <h1>Hi, <span id="username">StackOverflow</span>!</h1> <button onclick="changeName('user3088260')">Click to Change the Name</button> 

現在，獲取數據是一個不同的故事，我會假設一個AJAX調用，在這種情況下你可以做這樣的事情

if(xmlhttp.responseText !== ""){
    changeName("user3088260");
}

你提到的所有其他東西都是不必要的。

我還要說整個想法似乎是一個糟糕的設計選擇。 如果您有用戶名，我會假設您有一個登錄系統。 如果您有登錄系統，則必須在輸出頁面之前驗證用戶。 如果您必須在輸出頁面之前驗證用戶，那么您有他們的用戶名。 如果您有自己的用戶名，請將其放在預先呈現的頁面中。 輸出頁面后，無需使用JS。

希望這就是您要尋找的。 如果沒有，我相信其他人會很快就會出現這樣的事情。

Answer 4

最簡單的javascript模板引擎之一是Underscore。 這是SO的受保護答案，解釋了如何執行此操作：

如何使用underscore.js作為模板引擎？

Answer 5

就像有人說的那樣，有很多Javascript模板框架。 這里有一些：

• Handlebars.js
• mustache.js
• Hogan.js
• doT.js
• nunjucks
• 玉

選擇一個之后，您可以（例如）執行以下操作：

<h1>Hi, {{userName}}</h1>

您可以在此鏈接上看到使用Angular進行客戶端模板化的示例。