在 html 标记中打印 JavaScript 变量答案

【问题标题】：Print JavaScript variable in a html tag在 html 标记中打印 JavaScript 变量
【发布时间】：2016-10-11 01:36:16
【问题描述】：

试图打印 JS var run_name 作为 HTML 内容的一部分。这是我整个 JS 代码中的小 sn-p：

var run_name = uiscripts.context.run.id; //uiscripts.context.run.id is a string
var markUp = "<h3 class='title' style='text-align: center'>Job is _____</h3>\r\n"; 
$("#startJobDialog").html(markUp);

markUp var 包含我想作为#startJobDialog 的一部分显示的 HTML 内容。您可以在 markUp var 中看到带下划线的空白内容。我想将run_name var 填入该空白处。那就是约伯是_____。我该怎么做？

到目前为止，我已经尝试了两种方法：

var markUp = "<h3 class='title' style='text-align: center'>Job is <var>run_name</var></h3>\r\n";

还有这个：

var run_name = uiscripts.context.run.id;
    var markUp = "<h3 class='title' style='text-align: center'>Job is _____</h3>\r\n";

    markUp += run_name;

    $("#startJobDialog").html(markUp);

【问题讨论】：

标签： javascript jquery html jquery-ui dialog

【解决方案1】：

试试这个。您只需要将variable run_name 的值与html 连接起来。

var markUp = "<h3 class='title' style='text-align: center'>Job is <span style='font-weight:bold'>"+run_name+"</span></h3>\r\n";

【讨论】：

这解决了我的问题，但是对于 var run_name，颜色和字体方面的灵活性会更好。 <var color="something"> 可行吗？我想在这一行做一些正确的事情，可能不是 CSS。建议。
我没听明白？
我不确定您是否应该使用 标签。要更改文本颜色，您应该使用 CSS。
我可以在bold or italic way 中打印 var run_name 吗？我也想highlight the the value of var，也许是某种颜色。

【解决方案2】：

试试这个：

var run_name = uiscripts.context.run.id; //uiscripts.context.run.id is a string
var markUp = "<h3 class='title' style='text-align: center'>Job is " + run_name + "</h3>\r\n"; 

$("#startJobDialog").html(markUp);

此外，在 ES6 中，您可以在 template literals 中使用插值。如果将字符串放入 `` 并将变量包装到 ${run_name}

【讨论】：

【解决方案3】：

您可以简单地通过以不同的方式定义#startJobDialog 来做到这一点：-

<div id = "startJobDialog">
<h3 class='title' style='text-align: center'>
Job is <div id = "run_name"> </div>
</h3>
</div>

jquery:-

$("#run_name").html(run_name);

由于您的标记不是可变的，因此您可以将其放入 html 本身。或者您可以使用 + markup + 将 run_name 连接到您的标记变量中

【讨论】：

【解决方案4】：

试试下面的

var markUp = $('<h3>',{
class:'title',
style:'text-align: center',
text:"Job is "+run_name });
$("#startJobDialog").html(markUp);

【讨论】：

$('<h3>',{ 引号丢失，; 不应该在变量之后出现。
不确定$("#startJobDialog").append(markUp); 不起作用，但这个：$("#startJobDialog").html(markUp); 起作用。