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
  • 10,626
  • 3
  • 36
  • 50
bestprogrammerintheworld
  • 5,270
  • 7
  • 38
  • 69
  • `$('#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
  • 10,116
  • 2
  • 34
  • 61
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
  • 240,457
  • 50
  • 366
  • 401
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,031
  • 9
  • 47
  • 77