jQuery: How to assign a variable inside of .html

Question

I have written some jQuery to get a value and then store it in a variable no problem:

$(document).ready(function(){
    $('a.news_video_player_list').click(function () { 
    var youtube = $(this).attr('id');
      $('.news_vid_playerL').html('youtube'); 
    });
});

Now that I have the variable "youtube", I'd like to put some HTML inside a div named ".news_vid_playerL" with the variable value. My goal was to do this:

$('a.news_video_player_list').click(function () { 
var youtube = $(this).attr('id');
  $('.news_vid_playerL').html('<iframe title="YouTube video player" width="610" height="420" src="http://www.youtube.com/embed/+youtube+?&rel=0" frameborder="0" allowfullscreen></iframe>'); 
});

If you look in the src path, you'll see I put a placeholder +youtube+ which I'd like to populate with the variable value. Not sure how to pull that off.

Thanks!

davin · Accepted Answer · 2011-04-25 18:58:53Z

1

String concatenation:

$(document).ready(function(){
    $('a.news_video_player_list').click(function () {
      $('.news_vid_playerL').html('<iframe title="YouTube video player" width="610" height="420" src="http://www.youtube.com/embed/'+$(this).attr('id')+'?&rel=0" frameborder="0" allowfullscreen></iframe>'); 
    });
});

answered Apr 25, 2011 at 18:58

davin

45.6k9 gold badges81 silver badges78 bronze badges

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

Comments

BraedenP · Accepted Answer · 2011-04-25 19:03:34Z

1

You just need to pull the variable out of the string. To do this, you put the first part of the string, then append the variable, and then append the rest of the string, like so:

$('a.news_video_player_list').click(function () { 
var youtube = $(this).attr('id');
  $('.news_vid_playerL').html('<iframe title="YouTube video player" width="610" height="420" src="http://www.youtube.com/embed/' + youtube + '?&rel=0" frameborder="0" allowfullscreen></iframe>'); 
});

Otherwise, JavaScript just thinks you want to put "+youtube+" in the URL, rather than the value of the youtube variable.

edited Apr 25, 2011 at 19:03

answered Apr 25, 2011 at 18:57

BraedenP

7,2354 gold badges35 silver badges43 bronze badges

1 Comment

flinx777 Over a year ago

awesome...I appreciate your response!

Mike Thomsen · Accepted Answer · 2011-04-25 18:58:15Z

0

Ummm like this:

'<iframe title="YouTube video player" width="610" height="420" src="http://www.youtube.com/embed/' + youtube + '?&rel=0" frameborder="0" allowfullscreen></iframe>'

Note the ' + youtube + ' part (the single quote before and after the + signs).

answered Apr 25, 2011 at 18:58

Mike Thomsen

37.7k11 gold badges63 silver badges86 bronze badges

Comments

James Montagne · Accepted Answer · 2011-04-25 18:59:02Z

0

You were close. You're actually including the string +youtube+ in your src. You need to concatinate it into the string like so:

$('a.news_video_player_list').click(function () { 
var youtube = $(this).attr('id');
  $('.news_vid_playerL').html('<iframe title="YouTube video player" width="610" height="420" src="http://www.youtube.com/embed/'+youtube+'?&rel=0" frameborder="0" allowfullscreen></iframe>'); 
});

answered Apr 25, 2011 at 18:59

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Comments

Arihant Nahata · Accepted Answer · 2011-04-25 19:00:17Z

0

$('.news_vid_playerL').html('<iframe title="YouTube video player" width="610" height="420" src="http://www.youtube.com/embed/' + youtube '?&rel=0" frameborder="0" allowfullscreen></iframe>');

answered Apr 25, 2011 at 19:00

Arihant Nahata

1,7502 gold badges19 silver badges30 bronze badges

Comments

user602271 · Accepted Answer · 2011-04-25 19:00:28Z

0

$('a.news_video_player_list').click(function () { 
var youtube = $(this).attr('id');
$('.news_vid_playerL').html('<iframe title="YouTube video player" width="610"     height="420" src="http://www.youtube.com/embed/"+youtube+"?&rel=0" frameborder="0" allowfullscreen></iframe>'); 
});

Just cut your quotes, insert your variable and then continue.

answered Apr 25, 2011 at 19:00

user602271

Collectives™ on Stack Overflow

jQuery: How to assign a variable inside of .html

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related