jQuery insert element and overwrite

Question

To empty a div and replace it with an image I am using:

$(this).html('');
$('<img/>', {
   src: 'blah.gif'
}).appendTo(this);

Is there a better way to do this?

*edit: I have to keep the $('<img/>' part in otherwise I could just do $(this).html('<img src="blah.gif">'); I know!!

Answer 1

You can do this using .empty() or your current .html() with .append(), it's chained but not that much of an improvement:

$(this).empty().append($('<img />', { src: 'blah.gif' }));
//or..
$(this).html('').append($('<img />', { src: 'blah.gif' }));

Answer 2

this should do the same thing in less code

 $(this).html('<img src="blah.gif />"');

Answer 3

I prefer .empty():

$(this).empty().append($('<img />', {
        src: 'blah.gif' 
    }
));