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>';

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>';

• javascript
• jquery

• the whole??? Explain it, please, with example – Cheery Commented Feb 24, 2012 at 21:16
• $('img').clone() will clone ALL of the images. What do you plan to do with them? – Diodeus - James MacFarlane Commented Feb 24, 2012 at 21:16
• 2 possible duplicate of Get selected element's outer HTML – SLaks Commented Feb 24, 2012 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 Commented Feb 24, 2012 at 21:16
• Yes I guess that is correct then I need to look at the outer HTML – John Magnolia Commented Feb 24, 2012 at 21:17

3 Answers 3

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/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/jasper/r3RDx/2/

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.

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

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