Question

I’m trying to change manually the content of a div using jQuery, depending on the image I click. Each image has it’s own description, so when I click on it, what I want to do is to change the content of a div like this:

var url_image = $(this).find('img').attr('src');
$(document).find('#descripcion').append($(this).find('img').attr('alt'));
$(document).find('#containerImage')
    .css('background-image', 'url(' + url_image + ')')

So with this code I change the background-image of the div #containerImage, and also the description shown on the div #descripcion. The problem is obvious: as I’m using append( bla bla ), every time I click on each image I append it’s description, and so on, with no erasing the previous ones.

I suppose there should be a method, not append, not prepend, that erases the content and substitutes it, but it has been several hours searching for that and I can’t find how.

So please, if you could help me with this…

Answer 1

Just use html or text method:

$("#descripcion").html($(this).find('img').attr('alt'));

It will change the text inside #descripcion block.