Replace images in a DIV using JavaScript

Question

I want to show different images in a DIV, the turn of an image depend on a random number. The image name is like 1.gif, 2.gif, .. 6.gif

to do that I coded

var img = document.createElement("IMG");
img.src = "images/1.gif";
document.getElementById('imgDiv').appendChild(img);

but it does not replace the old image how ever it add an another image right in the bottom of first image.

syntax for DIV is:

<div id="imgDiv" style="width:85px; height:100px; margin:0px 10px 10px 375px;"></div>

may u halp me ?

heisenberg · Accepted Answer · 2010-05-27 19:32:29Z

5

var img = document.createElement("IMG");
img.src = "images/1.gif";
var oldImg = document.getElementById('oldImg');
document.getElementById('imgDiv').replaceChild(img, oldImg);

answered May 27, 2010 at 19:32

heisenberg

9,7691 gold badge32 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohit Jain Over a year ago

exactly same posted by me... u posted first so i m deleting mine :-)

Paul Kearney - pk · Accepted Answer · 2010-05-27 19:29:28Z

3

var dv = document.getElementById('imgDiv');

// remove all child nodes
while (dv.hasChildNodes()) { 
    dv.removeChild(dv.lastChild); 
} 

var img = document.createElement("IMG"); 
img.src = "images/hangman_0.gif"; 
dv.appendChild(img);

answered May 27, 2010 at 19:29

Paul Kearney - pk

5,55328 silver badges28 bronze badges

2 Comments

PHP Ferrari Over a year ago

Great buddy, it work perfects. Please may u solve my old one problem described in my Question:Display label character by character using javascript? I will be thankful to you..

heisenberg Over a year ago

This will work (as long as the div has no other children that you don't want deleted), but on some machines you'll see a flicker as the old image is removed and the new one added that won't occur if you use .replace instead.

John · Accepted Answer · 2010-05-27 19:52:07Z

I would not recommend changing the src of the element in question. That would cause a lag in the display of the next image while the browser downloads the next image. If you have a set number of images you would want to preload them the way you are doing so now.

If you have the following code:

 <div id="imgDiv" style="width:85px; height:100px; margin:0px 10px 10px 375px;"></div>

You can do this:

<script type="text/javascript>
     var nextImage = document.createElement("img");
     nextImage.src = "your source here";

     document.getElementById("imgDiv").appendChild(nextImage);
</script>

Now that you have an image in place you can use the replaceChild() method:

var imageDiv = document.getElementById("imgDiv");
imageDiv.replaceChild(nextImage, imageDiv.childNodes[0]);

Quentin · Accepted Answer · 2010-05-27 19:27:07Z

0

If you want to replace an element, you need to use replaceChild, not appendChild.

answered May 27, 2010 at 19:27

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Replace images in a DIV using JavaScript

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related