Fill DIV with image when a LI tag is clicked (jQuery)

Question

Hi All,

Forgive me as this is probably an easy question for your jQuery guys out there, but I have the following:

1. Unordered list with images as list items
2. Empty div box with dotted border to show that it's empty

I want the user to be able to click on a list item and have the empty div fill with it's image.

Thanks in advance

Answer 1

You can write something like this:

$('ul li:has(img)').click(function() {
    $('#divBox').append($('img', this).clone()); 
});

EDIT: Fixed first version.

Or, alternatively,

$('ul li:has(img)').click(function() {
    $('#divBox #imageElem').attr('src', $('img', this).attr('src'));
});