Javascript .removeChild＆.appendChild无法正常工作

我试图获得一个非常简单的Javascript函数来使用.removeChild和.appendChild将另一个图像更改为另一个图像。我的代码如下：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。我无法弄清楚为什么，有些帮助？

谢谢！

来源

2011-05-12 RLJ

有没有你不只是改变现有IMG的src到“加载” SRC理由吗？ – kennebec 2011-05-12 20:48:01

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

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

显然，名为BANNER的元素没有名为banner的子元素。你有两个选择，要么放弃的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);

来源

2011-05-12 20:37:01 Wes

Aaaaaaah，工作，谢谢！ – RLJ 2011-05-12 20:44:21

而不是'remove/appendCHild'，你可以使用'replaceChild' - 少一个函数调用。 :-) – RobG 2011-05-12 20:49:40

@RobG自从我这么做已经很久了。我只是想对他的代码进行微小的更改。你可以自己给一个答案如果你想我会upvote，或者我可以改变这个说相同？ – Wes 2011-05-12 20:51:51

我觉得你的问题是，您试图删除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" /> 
...

来源

2011-05-12 20:38:48

Javascript .removeChild＆.appendChild无法正常工作

回答

相关问题