Get Image and append it elsewhere

I need to grab an entire image in one div, remove it and append it to another div. The image source will always be different so I will need to account for that. This is what I have so far, I'm pretty sure this isn't correct. Hopefully someone can point me in the right dire开发者_开发技巧ction.

<div id="sidebar">
</div>
<div class="content">
    <img src="123410928510934587.jpg" />
    <img src="45646513513515.jpg" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
var imgRetrieve = $('.content img:first').find('img').attr('src')
$(document).ready(function() {
    imgRetrieve ();
    $('.sidebar').append();
});
</script>

Relatively simple:

$('.content img:first').appendTo('#target_element');

JJ

The following code should get html from old div and apply to new div.

var oldDiv= $('#oldDiv').html();

$('#newDiv').html(oldDiv);

.html() will replace the complete html of new div , if you want to append you can use append

$('#newDiv').append(oldDiv);

This should work. I put it in a click handler, but it doesn't have to go there:

$('.content').click( function() {
    $('.content img:first').appendTo('#sidebar');
});

Example:

http://jsfiddle.net/cLEE6/