如何显示图像的HTML

Question

说我有这样的图像：

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

我想在例如代码标签中显示该图像的html，但我该如何获取它？我可以轻松获得图像：

$('img');

但是如何获取它的HTML并将其附加到代码标记？

Answer 1

假设您有这样的元素：

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

你可以这样做：

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

或者，如果您希望半编码进行显示，请执行以下操作：

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

You can give that a try here。获取html部分本身也是以插件形式提供的，here和here，编码，如果需要，你必须自己做，或者获得语法插件。

Answer 2

插件形式：

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

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