How to display the HTML of an image

Question

Say I have an image like this:

<img src="someimage.png" alt="Image" />

I want to display the html of that image in for example a code tag, but how can I get it? I can get the image easily:

$('img');

But how can I get the HTML of it and append it to a code tag?

Answer 1

Say you have an element like this:

<code id="mycode"></code>

You can do it like this:

$("#mycode").append($("<div />").append($('img').clone()).html());

Or if you want it semi-encoded for display, like this:

var html = $("<div />").append($('img').clone()).html();
$("#mycode").append(html.replace('<','&lt;').replace('>','&gt'));​​​​​​​​​​​​​​​​​​​​​

You can give that a try here. The getting the html portion itself is available in plugin form as well, here and here, the encoding, if you need it, you'll have to do yourself, or get a syntax plugin.

Answer 2

Plugin form:

jQuery.fn.outerHtml = function() {
    return $('<div>').append( this.clone() ).html();
};

$('#mycode').append($('img').outerHtml());