在没有 div 的情况下将 Javascript 字符串插入 html 的最简单方法？答案

【问题标题】：Simplest way to insert Javascript string into the html without a div?在没有 div 的情况下将 Javascript 字符串插入 html 的最简单方法？
【发布时间】：2014-12-17 08:26:04
【问题描述】：

使用模板引擎，我总是可以将变量放入非常简单的文本中，如下所示：

Welcome {{ user.first_name }}

我现在需要使用 Javascript 字符串来执行此操作。我知道有 js 模板引擎，但我只需要做一次，所以我不想为此加载整个 js 模板库。我知道我可以使用 jQuery 在所需位置创建一个 div，然后使用 .html method 插入字符串，但这对于这个简单的事情似乎也很麻烦。

在 php 中，虽然它很丑，但你可以这样做：

Welcome <? echo user.first_name; ?>

在 Javascript 中是否有类似的方法可以做到这一点？欢迎所有提示！

【问题讨论】：

你的意思是这样？ Welcome <script>user.first_name</script>
@Bhojendra-C-LinkNepal - 这似乎不起作用：jsfiddle.net/avtwbfh4
看到 javascript 是一种客户端语言，所以你必须做一些事情才能得到一些东西。因此，在 javascript 中，必须以某种方式与文档进行交互才能获得所需的结果。
我认为您正在寻找的是在 JavaScript 中运行的模板引擎。例如。 Angular 内置了模板。还有几个更轻量级的引擎可用。

标签： javascript php jquery html templates

【解决方案1】：

由于它被标记为jquery，您可以使用:contains 伪选择器并替换它。

var first_name = "kramer65", placeholder = "{{ user.first_name }}"
$("html :contains('" + placeholder + "')").text(function(_, txt){
   return txt.replace(placeholder, first_name);
});

只需使用Welcome {{ user.first_name }} 在 html 中，因为它必须是任何一个容器的子容器，所以上面的代码可以工作。

DEMO

【讨论】：

@Bhojendra-C-LinkNepal 是的。使用 data-attributes 有点矫枉过正
虽然我的口味仍然太多代码，但我想这是唯一的方法。谢谢！