使用 AJAX 附加到 DOM，数据显示为字符串而不是 HTML答案

【问题标题】：Appending to DOM with AJAX, data displaying as string instead of HTML使用 AJAX 附加到 DOM，数据显示为字符串而不是 HTML
【发布时间】：2017-05-22 12:15:21
【问题描述】：

我正在尝试将通过 AJAX 请求检索到的数据附加到 DOM，以便我可以抓取它并将其放入数组中。但是，当我将数据附加到 DOM 中时，它会显示为字符串而不是 HTML。我的附加到 DOM 的代码如下，谢谢！

var url = "https://xxxxxxx.com";
var $storeData = document.getElementById("data");

$.getJSON(url, function(data) {
    var checkins = data.response.venues[0].stats.checkinsCount;
    var formattedCheckins = Number(checkins);
    $storeData.append('<p class="getData">' + formattedCheckins + '</p>')
});

我已经在formattedCheckins 变量上使用JSON.stringify 进行了尝试，也得到了类似的结果。感谢您的帮助！

【问题讨论】：

标签： javascript jquery html ajax dom

【解决方案1】：

您的问题是 document.getElementById 正在返回本机 DOM 元素。使用该对象的 append() 方法将文本放置在元素中，而不是 HTML。您似乎将此与添加 HTML 的 jQuery 的 append() 方法混淆了。

要解决这个问题，请使用 jQuery 选择 #data 元素：

var $storeData = $("#data");

var formattedCheckins = 12345;
$storeData.append('<p class="getData">' + formattedCheckins + '</p>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data"></div>

【讨论】：

【解决方案2】：

如果您使用 jQuery，请尝试使用 var $storeData = $("#data");。

document.getElementById 返回一个 DOM 对象。

var storeData = $('#data') 返回一个 jQuery 对象。

【讨论】：