在jquery中將href添加到.text輸出

Question

我正在使用firebase來獲取這些數據，我想在message.userName輸出中添加href標簽

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

為了避免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 2

你必須使用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 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)
]);

希望這可以幫助！