Javascript: Append and Remove Image from a DIV in setTimeout loop

Question

I'm trying to load an image into a div using JavaScript. Below is the current snippet of the code.

window.onload=function image_show() {
  var thumbContainer = document.getElementById("art_img");
  var thumbnail = document.createElement("img");
  var img_width = document.getElementById("art_img").offsetWidth;
  var img_height = document.getElementById("art_img").offsetHeight;
  thumbnail.onload=function() { 
    thumbContainer.appendChild(thumbnail);
  }
  thumbnail.src = "http://xyz/bkg.png";
  thumbnail.width = img_width;
  thumbnail.height = img_height;
  setTimeout(image_show, 1000 );
}

The appendChild() method keeps appending the images (one below the other) after the Timeout. But I want to actually keep refreshing the div with the same image.

The source of the image will be updated on my website with the same name, and I want the script to display the new image after Timeout. I tried inserting a removeChild() method just before appendChild(), but didn't work as expected. Any help will be appreciated.

Answer 1

just empty the element before you append again

  thumbnail.onload=function() { 
    thumbContainer.innerHTML = ""; // ADD THIS LINE
    thumbContainer.appendChild(thumbnail);
  }