JavaScript .removechild＆.appendchild不起作用

StackOverflow https://stackoverflow.com/questions/5984062

题

我正在尝试获得一个非常简单的JavaScript函数，它将使用.removechild和.appendchild更改另一个图像。我的代码如下： 

<html> 
<head> 
<script type="text/javascript" language="javascript"> 
function bannerload(){

var banner = new Image();
banner.src = "IMG/banner.gif";

var loading = new Image();
loading.src = "IMG/loading.gif";

var bannerElement = document.getElementById("BANNER");

bannerElement.removeChild(banner);
bannerElement.appendChild(loading);
}
</script> 
</head> 

<body onload="bannerload()"> 
<div id="BANNER">
<img src="IMG/banner.gif" alt="Banner" />
</div> 
</body> 
</html>
.

但是，它不起作用。页面只需加载banner.gif，此图像永远不会更改为loading.gif。我无法弄清楚为什么，有些帮助吗？！

谢谢！

有帮助吗？

解决方案

这不起作用的原因是您正在尝试添加一个孩子并删除一个不是孩子的孩子。

您正在尝试从名为横幅的元素中删除名为横幅的子项。

显然，名为横幅的元素没有孩子名为横幅。您有两个选择要么将ID提供给子元素并致电`banner.parent.removechild（横幅）或以下内容：

示例Snipet 

var bannerElement = document.getElementById("BANNER");
//Banner only has one child.
var child = bannerElement.children[0];

bannerElement.removeChild(child);
bannerElement.appendChild(loading);
.

其他提示

我认为你的问题是你试图删除旗帜中不存在的孩子。 

var banner = new Image();
banner.src = "IMG/banner.gif";
...
bannerElement.removeChild(banner);
.

看看你是如何制作新图像，然后删除它，即使你没有附加？我想你应该尝试这样的东西： 

var banner = document.getElementById('id_banner')
banner.src = 'IMG/banner.gif' // or 'IMG/loading.gif' depending on which one you want
...
<body onload="bannerload()"> 
    <div id="BANNER">
        <img id="id_banner" src="IMG/banner.gif" alt="Banner" />
...
.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top