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

Answer 1

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/