使用 jQuery 将 ajax HTML 字符串附加到 DOM答案

【问题标题】：Append ajax HTML string to the DOM using jQuery使用 jQuery 将 ajax HTML 字符串附加到 DOM
【发布时间】：2013-09-08 19:09:13
【问题描述】：

我的脚本从 PHP 页面接收一些数据。一项称为“内容”的项目包含 HTML 代码。我必须将我的 HTML 代码放在一个 div 中，但不幸的是，它被附加为纯文本。如何将它作为真正的 HTML 附加到 DOM？这是我的 jQuery 代码：

      $.ajax({
      'url': 'ajaxdashboard.php',
      dataType: 'json',
      cache: false,
      success: function (json) {
          $.each(json, function (key, value) {
              for (i = 0; i < value.length; i++) {
                  $('#arguments').append('<div class="well student" style="display: none;" id="post-' + value[i].id + '"><h3>' + value[i].title + '</h3><span>Published by <font color="blue"><b>' + value[i].name + ' ' + value[i].surname + '</b></font></span><br><br><span id="post-content-' + value[i].id + '"></span></div>');
                  $('#post-content-' + value[i].id).html(value[i].content);
                  $('#post-' + value[i].id).fadeIn();
              }
          });
      }
  });

【问题讨论】：

这对我来说有点模棱两可。您是否尝试将返回的内容显示为 HTML（即用户将看到标签）？还是要渲染 HTML？
我必须显示为 html，用户应该在呈现的 html 中看到结果 :) 根本没有标签！
代码对我来说看起来不错。您是否有任何机会使用
```
 或  标签？
```
#arguments 或 #post-content 有问题吗？ value[i].content 是否返回 html 编码？
您的 html 代码是否已编码意味着它是否包含字符 < > , 等等。

标签： javascript jquery

【解决方案1】：

你的问题是 PHP 正在返回编码的 html。

更新您的 PHP 以返回原始 HTML。否则你可以用 jQuery 来欺骗它：

$('#post-content-' + value[i].id).html($(value[i].content).text());

Source for decoding html.

【讨论】：

【解决方案2】：

您的问题与此类似。

使用 text() 而不是自动转义的 html()。

Escaping HTML strings with jQuery

【讨论】：

text() 不会在 DOM 中呈现 html