How to display an HTML image

Question

Say I have an image like this:

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

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

$('img');

But how can I get the HTML code and add it to the code tag?

Answer 1

Say you have an element like this:

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

You can do it as follows:

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

Or, if you want it to be semi-encoded for display, for example:

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

. html , , , .

Answer 2

:

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

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