JQuery is added as text instead of html

Question

The following code gets the value from an Ajax json call and should add it to the div with the corresponding value. The fact is that it is added as text, and not as html, so I literally see my html as text on the page. How can i fix this?

$.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

By writing $('.offer-list li .img a')[k], you will get the actual HTML element with index k, not c jQuery. I think your problem is caused by this.

Try this code.

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

The function eqwill internally filter the jQuery set for the HTML element in the index k. See the documentation here .

, , HTML- append appendChild, node , HTML .