Add href to .text output in jquery

Question

I'm using firebase to get this data, I'd like to add href tags to message.userName output

$('#winners').text('Winner:' + ' ' + message.userName + ' ' + ' '+ 'score:' + ' ' + message.score + ' ' + ' '+ 'Start time:' + ' ' + message.startTime + ' ' + ' '+ 'End time:' + ''     + message.endTime );

I've tried

$('#winners').text('Winner:' + ' ' + '<a href=\"scoreTracker.php?id='+message.userID +'\"> + '  message.userName + ' ' + ' '+ 'score:' + ' ' + message.score + ' ' + ' '+ 'Start time:'
+ ' ' + message.startTime + ' ' + ' '+ 'End time:' + '' + message.endTime + '<\a>' );

Answer 1

To avoid XSS attacks (among other weird problems), append an anchor element and set its text. This means you don't have to worry about escaping anything.

$('#winners').append([
  'Winner: ',
  $('<a>')
    .attr('href', 'scoreTracker.php?id=' + encodeURIComponent(message.userId))
    .text(
      message.userName + ' score: ' + message.score + ' Start time: ' + message.startTime + ' End time: ' + message.endTime
    )
]);

If your HTML gets much more complicated, might I suggest a JavaScript template engine? I use Swig for most projects, but there are many choices.

Answer 2

you have to use append() , or html()

$('#winners').append('Winner:' + ' ' + message.userName + ' ' + ' '+ 'score:' + ' ' + message.score + ' ' + ' '+ 'Start time:' + ' ' + message.startTime + ' ' + ' '+ 'End time:' + ''     + message.endTime );

this may help you to understand better :

http://api.jquery.com/category/manipulation/dom-insertion-inside/

Answer 3

Both @Brad and @ProllyGeek are correct -- but @Brad's solution is best given the potential risk of XSS attacks. Here is his code, just cleaned up a bit for better readability. :)

$('#winners').append([
    'Winner: ',
    $('<a />')
        .attr('href', 'scoreTracker.php?id=' + encodeURIComponent(message.userId)
        .text(message.userName + ' score: ' + message.score + ' Start time: ' + message.startTime + ' End time: ' + message.endTime)
]);

Hope this helps!