How to inject a variable inside a JavaScript string

Question

I have the following code

var replyName = "1";

var test = "<div id=replyName></div>"

I want to set the class name to the variable replyName, what should I do?

Jared Farrish · Accepted Answer · 2011-06-26 05:47:15Z

3

You really have three options.

Use the opposite quote style, in this case single quotes, to surround the attribute declaration.
```
var test = "<div id='"+replyName+"' class='"+replyName+"'></div>";
```

Use escaped quotes.

var test = "<div id=\""+replyName+"\" class=\""+replyName+"\"></div>";

Use no quotes (beware this can cause problems if you have spaces, for instance, although an ID should not have spaces anyways). However, multiple classes would have spaces, so be careful, since in the below case those spaces would be interpreted as different attributes.
```
var test = "<div id="+replyName+" class="+replyName+"></div>"
```

I would use 1 or 2, although 3 is valid under the right conditions.

Also, as Mikola mentions in a comment below, if you flip the string quote style to single quotes, you'll have to use the opposite quoted style for your attribute a la 1, and escape single quotes like I do double quotes in 2.

http://jsfiddle.net/XyVuN/1/

edited Jun 26, 2011 at 5:47

answered Jun 26, 2011 at 5:34

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

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

2 Comments

Mikola Over a year ago

Another way is to use: var test = '<div id="' + replyName + '"></div>';

Jared Farrish Over a year ago

@Mikola - Yes, that's true; it's just the opposite of what the OP had included in the question.

Khepri · Accepted Answer · 2011-06-26 05:34:47Z

1

var replyName = "1";
var test = "<div id='" + replyName + "'></div>";

answered Jun 26, 2011 at 5:34

Khepri

9,6175 gold badges49 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to inject a variable inside a JavaScript string

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related