用javascript在html中注入数据

使用服务器端脚本很容易在HTML中插入数据，如下所示（ASP.NET）：

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

然后使用innerHTML修改其内容：

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

最终代码：

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

document.getElementById（“任意”）.innerHTML=“Hi，”+时间；

---

是否可以像在ASP.NET/PHP中那样在JavaScript中注入值/数据

编辑：该变量是一个JS变量，从服务器获取它是可控的。

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

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

如果你想找一些简单的东西，试试约翰·雷斯格

<h1>Hi, @theUsersName</h1>

你好，StackOverflow！

---

单击以更改名称最简单的javascript模板引擎之一是下划线。下面是一个受保护的答案，请说明如何执行此操作：

---

您可以使用一些模板库（如Handlebar）并使用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>

你好{{userName}
var template=handlebar.compile（$（“#hi template”）.html（）；
$（'#target'）.html（模板（{userName:“bob”}））；

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

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

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

Hi，{{userName}

---

您可以看到一个使用Angular on的客户端模板的示例。

为什么要使用JS创建元素？只需跳过步骤1+2（和第4步），添加

document.getElementById（“任意”）.innerHTML=“Hi，”+UserName在
标签内。这正是我所做的。。元素不是用JSdocument.getElementById（“无论什么”）创建的。innerHTML=“Hi，”+用户名；这不是你已经在用上面这条线做的吗？如果您说需要从ASP.NET页面检索数据，那么您可以简单地进行Ajax调用，检索数据并将其注入元素中。您的服务器端示例实际上使用了一种特定类型的“模板”，尽管ASP.NET没有这样称呼它。您还可以在客户端使用模板，使您的示例不比
Hi、{{theUsersName}}
复杂。主干和余烬不是模板库！正是我要说的。他可能指的是主干的依赖性，下划线.js。@Vohuman-bowhart感谢您指出这一点。是的，应该是下划线.js！现在更新答案。
<h1 id="whatever"></h1>
<script>
    document.getElementById("whatever").innerHTML = "Hi, " + TheTime;
</script>

<h1>Hi, @theUsersName</h1>

<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>

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