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

2

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

answered May 13, 2018 at 19:11

Get Off My Lawn

36.6k47 gold badges201 silver badges380 bronze badges

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

Comments

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

iStepashka

3021 silver badge6 bronze badges

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

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

1

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"

answered May 13, 2018 at 19:23

shredding

5,6414 gold badges50 silver badges80 bronze badges