jQueryはhtmlの代わりにテキストとして追加します

Question

次のコードはAjax json呼び出しから値を取得し、それを対応する値でdivに追加する必要があります。つまり、HTMLとしてではなくテキストとして追加するので、文字通り自分のhtmlをテキストとしてページに表示します。これをどうすれば解決できますか？

$.ajax({ 
    url: "https://domain.com/maprequest.php", 
    type: "POST", 
    dataType: 'json', 
    data: JSON.stringify(url_array), 
    crossDomain: true, 
    success: function(response) { 
     $.each(response, function(k, v) { 
      if (v != "") { 
       $('.offer-list li .img a')[k].append("<div class='hoverbox'><img src='" + v + "' alt='hover' /></div>"); 
      } 
     }); 
    } 
}); 

Answer 1

$('.offer-list li .img a')[k]を書くことによって、あなたは、インデックスk、ないjQueryセットで実際のHTML要素を取得します。私はあなたの問題がこれによって引き起こされると思います。

このコードを試してください。

$('.offer-list li .img a').eq(k).append("<div class='hoverbox'><img src='" + v + "' alt='hover' /></div>"); 

eq機能は、内部インデックスkでHTML要素のためのjQueryのセットをフィルタリングします。ドキュメントhereを参照してください。

実際に混乱しているのは、HTML要素にappendとappendChildのメソッドがあり、それぞれ純粋なテキストまたは子ノードが特定の要素に追加されているため、コードがHTMLを純粋なテキストとして追加しています。