Javascript .removeChild & .appendChild 不起作用答案

【问题标题】：Javascript .removeChild & .appendChild not workingJavascript .removeChild & .appendChild 不起作用
【发布时间】：2011-05-12 20:27:54
【问题描述】：

我正在尝试使用一个非常简单的 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。我不知道为什么，请帮忙？！

谢谢！

【问题讨论】：

是否有理由不将现有 img 的 src 更改为“正在加载”的 src？

标签： javascript onload appendchild removechild

【解决方案1】：

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

您正试图从名为 BANNER 的元素中删除名为 BANNER 的子元素。

显然名为 BANNER 的元素没有名为 banner 的子元素。您有两个选择，要么将 id 赋予子元素并调用 `banner.parent.removeChild(banner) 或以下：

示例片段

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

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

【讨论】：

而不是remove/appendCHild，您可以使用replaceChild - 少一个函数调用。 :-)
@RobG 我已经很久没有这样做了。我只是想对他的代码进行最小的更改。你可以自己给出答案如果你愿意我会投票，或者我可以改变这个说同样的话？

【解决方案2】：

我认为您的问题是您试图删除bannerElement中不存在的孩子。

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" />
...

【讨论】：