Jquery get image HTML

Question

How can I copy the whole <img /> using jquery.

At the moment I am trying: $('img').clone().html()

Usage:

'<div class="content-left">'+$(this).find(".bar .info").html()+$(this).find(".bar img").clone().html()+'</div>';

$('img').clone() will clone ALL of the images. What do you plan to do with them? — Diodeus - James MacFarlane, Feb 24 '12 at 21:16
possible duplicate of [Get selected element's outer HTML](http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html) — SLaks, Feb 24 '12 at 21:16
Are you asking how to copy the data that makes up the image, or the html markup that specifies the image `src`? — nnnnnn, Feb 24 '12 at 21:16
Yes I guess that is correct then I need to look at the outer HTML — John Magnolia, Feb 24 '12 at 21:17
I don't think a `img` element has `innerHTML` by definition... — Rémi Breton, Feb 24 '12 at 21:18
Sounds like you are trying to copy the `` tag with jQuery; that's not how that works. — Evan Davis, Feb 24 '12 at 21:19

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

To create new copies of every image in the DOM you can select them and clone them, then append them to some container.

//store a clone of all the images in the DOM in a variable
var $clone = $('img').clone();

//now add the clones to the DOM
$('#newContainer').html($clone);

Here is a demo: http://jsfiddle.net/jasper/r3RDx/1/

Update

You can create your HTML like this:

//create a new element to add to the DOM
//start by creating a `<div>` element with the `.content-left` class
//then add a string of HTML to this element
//then append a set of DOM elements (clones) to the same parent element (the `<div>`)
var $newElement = $('<div />').addClass('content-left').html($(this).find('.bar .info').html()).append($(this).find('.bar img').clone());

//then you can add the new element(s) to the DOM
$newElement.appendTo('#newContainer');

Here is a demo: http://jsfiddle.net/jasper/r3RDx/2/

How would I do it without the container. I have updated my questions with my use case — John Magnolia, Feb 24 '12 at 21:20

score 1 · Answer 2 · answered Feb 24 '12 at 21:25

1

jQuery objects are simple arrays containing the html of the selected element. This means that I can simply do: $('img.someclass')[0] to access the html of the first (and probably only) matched element.

answered Feb 24 '12 at 21:25

Alexander Varwijk

2,075
18
21

score 0 · Answer 3 · answered Feb 24 '12 at 21:20

0

clone includes the event handlers of the object. If you want just the html whats below would be fine

    $('#someid').html($('img'))

answered Feb 24 '12 at 21:20

useful

472
3
6

This just outputs: [object Object] – John Magnolia Feb 24 '12 at 21:21
That actually has the effect of moving all of the images selected to the new container. So instead of creating copies, this will just move the DOM elements from one container to another... which can be useful if it's the behavior you want. Also you can set whether or not you want to copy event handlers: http://api.jquery.com/clone/ – Jasper Feb 24 '12 at 21:26
Try this then $('img').each(function(index, value) { console.log(value.outerHTML) }); – useful Feb 24 '12 at 21:37

Jquery get image HTML

3 Answers3

Update