Martin AJ Martin AJ - 3 months ago 13
CSS Question

How can I set a image to an div by JS (or jQuery)?

I'm trying to make a notification box like this:

enter image description here

As you see, there is an image

.gif
on the top of it which will be hide when the content loads. Now I want to add following image to a
<div>
:

enter image description here

Here is my ajax code:

function notification(){

$(".notifications_list").html(/* add this path: /myfolder/img/progress.gif */ );

$.ajax({
url : '/myweb/files/notification.php',
dataType : 'JSON',
success : function (notification_system) {

$(".notifications_list").html(/* remove progress.gif photo */ );

if(notification_system.success === 1){
$(".notifications_list").html(notification_system.notifications);

} else {
alert('something is wrong');
}

}
});

}


Please focus on these two lines:

$(".notifications_list").html(/* add this path: /myfolder/img/progress.gif */ );

$(".notifications_list").html(/* remove progress.gif photo */ );


How can I do that? I mean, how can I add an image by its path to the HTML and then remove it?

Answer

Try 'prepend' and 'remove'...

 $('.notifications_list').prepend('<img class="your_image" src="http://placekitten.com/100/100">')

and to remove

$('.notifications_list .your_image').remove();

Demo here...