Javascript string interpolation like in ruby

Question

I am having the following code in my JS.

$('#ytResultsList').append('<li><a href="https://www.youtube.com/watch?v="' + item.id.videoId + '></a></li>');

As you can see from the above code, in HTML the result is like below.

<li><a href="https://www.youtube.com/watch?v=" bruvbiwlwfi=""></a></li>

I want the URL to be like below in HTML.

"https://www.youtube.com/watch?v=bruvbiwlwfi"

How can I do this in Javascript?

Get Off My Lawn · Accepted Answer · 2018-05-13 19:11:33Z

The issue is because you are formatting your href incorrectly. You need to move your closing " to after the variable like this:

$('#ytResultsList').append('<li><a href="https://www.youtube.com/watch?v=' + item.id.videoId + '"></a></li>');

iStepashka · Accepted Answer · 2018-05-13 19:14:11Z

1

quotation marks are your problem try:

$('#ytResultsList').append('<li><a href=\'https://www.youtube.com/watch?v=' + item.id.videoId + '\'></a></li>');

answered May 13, 2018 at 19:14

3021 silver badge6 bronze badges

1 Comment

It too works. But I don't get it easily like the quotation answer above.

shredding · Accepted Answer · 2018-05-13 19:23:33Z

Templatestrings do have pretty good support in modern browsers and can be polyfilled if you need to support older ones - note the backticks:

const videoId = 'bruvbiwlwfi' const url = `https://www.youtube.com/watch?v=${videoId}` => "https://www.youtube.com/watch?v=bruvbiwlwfi"