使用JavaScript替换DIV中的图像

我想在DIV中显示不同的图像，图像的转弯取决于随机数。图像名称就像1.gif，2.gif，... 6.gif使用JavaScript替换DIV中的图像

这样做，我编码

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>

可以úHALP我吗？

来源

2010-05-27 PHP Ferrari

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

来源

2010-05-27 19:32:29 heisenberg

完全相同发布我...ü张贴第一，所以我删除我:-) – 2010-05-27 19:39:01

如果要替换元素，则需要使用replaceChild而不是appendChild。

来源

2010-05-27 19:27:07 Quentin

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

来源

2010-05-27 19:29:28

伟大的好友，它的工作完美。请解决我在我的问题中描述的旧问题：使用javascript显示标签字符的个性？我会很感激你.. – 2010-05-27 19:47:37

这将工作（只要div没有其他孩子，你不想删除），但在一些机器上，你会看到一个闪烁的旧图像被删除和新的补充说，如果你使用.replace而不会发生。 – heisenberg 2010-05-27 19:47:49

我不会建议改变问题的元素的src。这会在浏览器下载下一张图像时导致下一张图像显示滞后。如果您拥有一定数量的图像，您可以按照现在的方式预先加载它们。

如果你有下面的代码：

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

你可以这样做：

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

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

现在，你在的地方，你可以使用的replaceChild（）方法的图像：

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

来源

2010-05-27 19:52:07 John

使用JavaScript替换DIV中的图像

回答

相关问题