Question

使用服务器端脚本就像在这样（HTML）中以HTML格式注入数据一样简单：

//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 Templating解决了将数据绑定到HTML元素的问题。

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

如果您正在寻找简单的内容，请尝试使用John Resig的Micro Templating engine

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的受保护答案，解释了如何执行此操作：

How to use underscore.js as a template engine?

Answer 5

正如有人所说，有很多Javascript模板框架。在这里你有几个：

选择一个之后，你可以（例如）做这样的事情：

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

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

使用javascript在html中注入数据

5 个答案: