将变量引用到HTML text/HTML类型中

Question

在JS中，我将5分配给变量myVar。然后我想把这个变量传递到一个HTMLtext/HTML类型中，并在我的演示div中显示它。我失败了，因为我得到了"myVar"而不是5。你能请人帮帮我吗？

<script>
myVar = 5
</script>
<script id="myBlock" type="text/html">myVar</script>
<div id="DemonstrationDiv"></div>
<script>
vBlock = document.getElementById('myBlock');
document.getElementById('DemonstrationDiv').innerHTML = vBlock.innerHTML
</script>   

Answer 1

如果在vBlock.innerHTML上调用eval()，它就会工作

<script>
myVar = 5
</script>
<script id="myBlock" type="text/html">myVar</script>
<div id="DemonstrationDiv"></div>
<script>
vBlock = document.getElementById('myBlock');
document.getElementById('DemonstrationDiv').innerHTML = eval(vBlock.innerHTML)
</script>

Answer 2

<script>
myVar = 5
</script>
<script id="myBlock" type="text/html">{{myVar}} is {{myVar}}, and {{myVar}} should be 5</script>
<div id="DemonstrationDiv"></div>
<script>
var template = document.getElementById('myBlock').innerHTML;

document.getElementById('DemonstrationDiv').innerHTML = template.replace(/{{myVar}}/g, myVar);
</script>

如果你不打算经常这样做，你可以写一个one off，它只是用变量值替换字符串。

不过，如果您要经常这样做，我建议您查看Handlebars或Mustache以获得完整的模板库。我在这里使用的语法与它们遵循的模式相似。