使用JavaScript替换DIV中的图像

我想在一个DIV中显示不同的图像，图像的顺序取决于一个随机数。 图像名称类似于1.gif、2.gif、。。6.gif

为此，我编写了代码

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

但是，无论它如何在第一张图像的底部添加另一张图像，它都不会替换旧图像

DIV的语法为：

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

---

你能帮我吗？

如果你想替换一个元素，你需要使用，而不是appendChild。

如果你想替换一个元素，你需要使用，而不是appendChild。

我不建议更改相关元素的src。这将导致浏览器下载下一幅图像时，下一幅图像的显示出现延迟。如果您有一定数量的图像，您可能希望按照现在的方式预加载它们

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); 

如果您有以下代码：

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

---

我不建议更改相关元素的src。这将导致浏览器下载下一幅图像时，下一幅图像的显示出现延迟。如果您有一定数量的图像，您可能希望按照现在的方式预加载它们

如果您有以下代码：

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

---

和我发的一模一样。。。你先发了，所以我删除了我的：-）和我发的完全一样。。。你先发了帖子，所以我删除了我的：-）好朋友，它工作得很完美。请你解决我问题中描述的一个老问题：使用javascript逐个字符显示标签？我会感谢你。这会起作用的（只要div没有你不想删除的其他子项），但在某些机器上，当旧图像被删除，新图像被添加时，你会看到闪烁，如果你使用它，就不会出现这种情况。替换。很好的朋友，它工作得很完美。请你解决我问题中描述的一个老问题：使用javascript逐个字符显示标签？我将感谢您。这将起作用（只要div没有您不想删除的其他子项），但在某些机器上，当删除旧图像和添加新图像时，您会看到闪烁，如果您使用，则不会出现。请替换。

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

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

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