9

How do I get the html of an image with jQuery?

I want this as the output:

<img src="pokerface.png" alt="pokerface" />

I'm trying with this, but I'm getting an empty string (or null):

var imageHtml = $("#user-dialog .product-item img").html();

The following returns the Object, but I want the html

var imageHtml = $("#user-dialog .product-item img")

How do I do that?

If I try with 

var imageHtml = $("#user-dialog .product-item img").attr("src");

I get the correct source of the image (pokerface.png), so I know it's the correct element.

DACrosby
  • 11,116
  • 3
  • 39
  • 51
bestprogrammerintheworld
  • 5,417
  • 7
  • 43
  • 72
  • `$('#selector').html()` should return the HTML according to the jQuery docs. ( http://api.jquery.com/html/ ) Did you check if your selector is correct? – Thew Jul 07 '13 at 21:43
  • Could you just recreate the HTNL? Grab the object and build a new HTML string from that. – DACrosby Jul 07 '13 at 21:43
  • @Thew "In an HTML document, .html() can be used to get the contents of any element." It gets the element HTML contents, not the element's own HTML; e.g. it gets the elements `innerHTML`. – DACrosby Jul 07 '13 at 21:45
  • @DACrosby Woops, read his question wrong. Sorry! – Thew Jul 07 '13 at 21:48
  • @DACrosby - Ahhh thanks, that solved my issue. img was unneccessary in my case. – bestprogrammerintheworld Jul 07 '13 at 21:49

3 Answers3

17
jQuery("#user-dialog .product-item img").get(0).outerHTML;
pdoherty926
  • 9,895
  • 4
  • 37
  • 68
5

You're effectively looking for the outerHTML (in those browsers that support it):

var imageHtml = $("#user-dialog .product-item img").map(function(){
        return this.outerHTML;
    }).get();

JS Fiddle demo.

This will, of course, return an array of the img element's HTML; which allows jQuery to collate all the relevant information, rather than explicitly iterating through the matched set with get() or using bracket-notation indices [n]

And a simple (seriously, it's very simple) plugin to retrieve the outerHTML of the matched elements:

(function ($) {
    $.fn.htmlOuter = function () {
        var self = this,
            len = self.length,
            _tmp = document.createElement('div'),
            _h = [];
        for (var i = 0; i < len; i++) {
            _tmp.appendChild(self[i].cloneNode());
            _h.push(_tmp.innerHTML);
            _tmp.innerHTML = '';
        }

        return _h;
    };
})(jQuery);

var images = $('img').htmlOuter();
console.log(images);

JS Fiddle demo.

Note that the above returns an array, whereas, ordinarily, jQuery getters return results from only the first element of a matched set, if that's what you'd prefer then you could alter the final line of the plugin to:

return _h[0];

JS Fiddle demo.

Oh, and obviously (like .text() and other getter methods) this explitly cannot be chained, given that it returns an array, or a string (if you preferred), not the jQuery object.

References:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
3

If the image is the only element inside the container you could do this: 

$("#user-dialog .product-item img").parent().html();

Otherwise you can create a dummy element and append the img object to it to get the .html() value. 

$('<div>').append($("#user-dialog .product-item img").clone()).html();

The solution is proposed here
How do you convert a jQuery object into a string?

Community
  • 1
  • 1
pasine
  • 11,311
  • 10
  • 49
  • 81