使用 javascript 在 html 中注入数据答案

【问题标题】：Injecting data in html with javascript使用 javascript 在 html 中注入数据
【发布时间】：2014-12-29 16:16:43
【问题描述】：

使用服务器端脚本，在 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 变量，从服务器获取它是受控的。

【问题讨论】：

为什么要用JS创建元素？只需跳过第 1 + 2 步（以及第 4 步）并在 <script></script> 标签内添加 document.getElementById("whatever").innerHTML = "Hi, " + UserName;。
这正是我所做的......元素不是用JS创建的
document.getElementById("whatever").innerHTML = "Hi, " + UserName;这不是你已经在用上面的行做的吗？如果您说您需要从 ASP.NET 页面中检索数据，那么您可以简单地进行 Ajax 调用并检索该数据并将其注入到元素中。
您的服务器端示例实际上使用了一种特定类型的“模板”，尽管 ASP.NET 没有这样称呼它。您还可以在客户端使用模板，使您的示例不比<h1>Hi, {{theUsersName}}</h1> 复杂。

标签： javascript html

【解决方案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>

【讨论】：

【解决方案2】：

Javascript Templating 正好解决了将数据绑定到 HTML 元素的问题。

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

如果您正在寻找简单的东西，请尝试来自 John Resig 的 Micro Templating engine

【讨论】：

Backbone 和 Ember 不是模板库！
正是我要说的。他可能指的是主干的依赖，underscore.js。
@Vohuman bowheart 感谢您指出这一点。是的，它应该是 underscore.js！现在更新答案。

【解决方案3】：

<h1>Hi, @theUsersName</h1>

我从未使用过 ASP.NET，但我假设 @theUserName 是一个变量。如果是这种情况，那么不可能进行一对一的替换。不过还是可以的。

我不确定您是如何获得用户名的，但我假设您有某种方法可以将其放入 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。

希望这就是您正在寻找的。如果没有，我敢肯定其他人很快就会出现这种情况。

【讨论】：

【解决方案4】：

Underscore 是最容易上手的 javascript 模板引擎之一。这是来自 SO 的受保护答案，解释了如何做到这一点：

How to use underscore.js as a template engine?

【讨论】：

【解决方案5】：

正如有人所说，有很多 Javascript 模板框架。这里有一些：

选择一个之后，您可以（例如）执行以下操作：

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

您可以在 this link 上查看使用 Angular 的客户端模板示例。

【讨论】：