AJAXでDOMに追加すると、データがHTMLの代わりに文字列として表示される

Question

AJAXリクエストによって取得されたデータをDOMに追加しようとしているため、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を使用して、これを試してみました。ご協力いただきありがとうございます！

Answer 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>

Answer 2

あなたはjQueryのを使用している場合は、代わりにvar $storeData = $("#data");を試してみてください。

document.getElementByIdはDOMオブジェクトを返します。

var storeData = $('#data')は、jQueryオブジェクトを返します。