使用JSON数据将HTML附加到文档的正确方法

Question

我有一个JSON格式的AJAX响应，如下所示：

{
  "color":"DEDE54",
  "text":"<p>some text<\/p>"
}`

我想以格式化的HTML附加它。 下面我只是在字符串comment包含所有HTML，并添加它们应该去的变量。 它有效，但它看起来很乱，不可读。

有没有正确的方法我应该这样做？

  appendResponse:function (response) {
    if (response !== 'wait'){
      var color = response.color;
      var text = response.text;
      var comment = '<div class="comment"><div class="avatar" style="background:#'+color+'"></div><div class="text">'+text+'<div class="date">Just now</div></div></div>';
      $('#comment-form').after(comment);
    } else {
      Materialize.toast('Wait 20 seconds between comments', 5000, 'toast-alert');
    }
  }

Answer 1

我认为这并不坏。 一些可能的解决方案：

• 创建一个将响应作为参数并返回字符串的函数：将“混乱”移动到一个位置，并保持“主”代码清洁
• 模板字符串（如@dfsq所述）：它们可以保持代码清洁，但它们也存在问题
• 动态创建并逐个包含每个元素：

例如：

var comment = jQuery('<div/>', {
    class: 'comment'
});

var avatar = jQuery('<div/>', {
    class: 'avatar'
});

$avatar.css("background-color",response.color);
avatar.appendTo(comment);
.....
.....

但是，我想指出的一件事是你的代码似乎容易受到XSS的影响 ：在你的例子中直接从webservice中包含HTML元素并不是一个好习惯，因为你无法转义字符（更好更容易预防XSS）。 也许你已经知道了，但万一你没有，请照顾它