Print JavaScript variable in a html tag

Question

Trying to print JS var run_name as a part of HTML content. Here is my small snippet out of my entire JS code:

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 holds the HTML content that I want to show as a part of #startJobDialog. You can see the blank underlined content in markUp var. I want to fill run_name var into that blank. That is Job is _____. How do I do it?

So far I have tried 2 approaches:

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

and this:

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

Mairaj Ahmad · Accepted Answer · 2016-06-10 07:49:50Z

1

Try this. You simply need to concatenate the value of variable run_name with html.

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

edited Jun 10, 2016 at 7:49

answered Jun 10, 2016 at 7:22

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pratik Jaiswal Over a year ago

This solved my question, but flexibility in terms of color and font would be better for the var run_name. Is <var color="something"> doable? I want to do something right in this line and may not be CSS. Suggestions.

Mairaj Ahmad Over a year ago

I didn't get you ?

Anton Honcharuk Over a year ago

I am not sure, that you should use <var> tag at all. To change the text colour you should use CSS.

Pratik Jaiswal Over a year ago

Can I print var run_name in bold or italic way? I also want to highlight the the value of var, maybe by some color.

Anton Honcharuk · Accepted Answer · 2016-06-10 07:51:15Z

1

Try this:

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

Also, In ES6 you can use interpolation within template literals. If put string in `` and wrap variable into ${run_name}

edited Jun 10, 2016 at 7:51

answered Jun 10, 2016 at 7:26

Anton Honcharuk

3091 gold badge2 silver badges7 bronze badges

Comments

RanchiRhino · Accepted Answer · 2016-06-10 07:30:36Z

0

You can do it simply by defining #startJobDialog in a different way :-

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

Since your markup is not variable so you can put in in html itself. Or you can just concatenate run_name in your markup variable using + markup +

answered Jun 10, 2016 at 7:30

RanchiRhino

7745 silver badges21 bronze badges

Comments

madalinivascu · Accepted Answer · 2016-06-10 08:18:33Z

0

try the following

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

edited Jun 10, 2016 at 8:18

answered Jun 10, 2016 at 7:26

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

2 Comments

Jai Over a year ago

$('<h3>',{ quotes are missing and ; should not have to be there after variable.

Pratik Jaiswal Over a year ago

Not sure $("#startJobDialog").append(markUp); does not work but this: $("#startJobDialog").html(markUp); does.

Collectives™ on Stack Overflow

Print JavaScript variable in a html tag

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related