在 html 标记中打印 JavaScript 变量

Posted 2023-05-08

【中文标题】在 html 标记中打印 JavaScript 变量

【英文标题】：Print JavaScript variable in a html tag

【发布时间】：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);

【参考方案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); 起作用。