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

Question

我有一个以JSON格式返回的AJAX响应，它看起来像这样：

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

我希望将其以格式化的HTML形式附加。我现在只有一个字符串comment，并在应该存在的变量位置添加它们。这种方法能够实现，但看起来比较混乱，不易读懂。

请问是否有更好的做法？

  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');
    }
  }

- frosty

---

至少你可以使用模板字符串来格式化它：https://jsfiddle.net/p78udt2j/ - dfsq

@dfsq - 很酷，我从来不知道这个。把它发表为答案？ - frosty

并非所有事情都如此美好。在Safari和IE中不支持模板字符串，因此您需要将代码转换为ES5，但仅为此一个而言并不值得。 - dfsq

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攻击：在你的示例中直接从Web服务中包含HTML元素并不是一个好的做法，因为你无法转义字符（防止XSS的更好、更简单的方法）。也许你已经知道了，但如果你不知道，请注意一下。

- gbalduzzi

---

谢谢回答...我想我会保持原样。是的，在将其作为响应发送之前，忘记在周围放置htmlentities()了。 - frosty