Question

$.each(data, function(i,item){
    var img = $('<img>');
    img.attr('src', item.thumb);
    img.attr('width', item.width);
    img.attr('height', item.height);
    o += '<li><a href="#">'+img+'<h3>'+item.title+'</h3><p>'+item.excerpt+'</p></a></li>';
});

The above outputs

li>[object] <h3>title</h3><p>excerpt</p></li>

My problem is with image tag. I understand that I am just appending a image object rather than the element… and using appendto would work but in the above scenario, in a loop, how do I accomplish this. Instead of displaying [object] how can display the image tag.

Answer 1

you have to get the html out of the object. there’s a dozen or more ways to do that. one way is img[0].outerHTML which gives you the raw DOM element in the jQuery selector object, and then the outer html of that element.

$.each(data, function(i,item){
    var img = $('<img>');
    img.attr('src', item.thumb);
    img.attr('width', item.width);
    img.attr('height', item.height);
    o += '<li><a href="#">'+img[0].outerHTML+'<h3>'+item.title+'</h3><p>'+item.excerpt+'</p></a></li>';
});