Добавить HREF в .text выход в JQuery

Question

Я использую firebase, чтобы получить эти данные, Я хотел бы добавить HREF теги к message.userName OUTPUT

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

Я попытался

$('#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

вы должны использовать Append() или HTML()

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

это может помочь вам лучше понять:

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

Answer 2

Чтобы избежать XSS атак (среди других странных проблем), добавить элемент якоря и его текст. Это означает, что вам не нужно беспокоиться о том, чтобы избежать чего-либо.

$('#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 
    ) 
]); 

Если ваш HTML-код становится намного сложнее, могу ли я предложить механизм шаблона JavaScript? Для большинства проектов я использую Swig, но есть много вариантов.

Answer 3

Как @Brad, так и @ProllyGeek являются правильными, но решение Brad лучше всего дает потенциальный риск нападений XSS. Вот его код, просто немного очищенный для лучшей читаемости. :)

$('#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) 
]); 

Надеюсь, это поможет!