Javascript .removeChild e .appendChild não funcionam

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

Pergunta

Estou tentando fazer funcionar uma função Javascript muito simples que mudará uma imagem por outra usando .removeChild e .appendChild.Meu código é o seguinte:

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

No entanto, não está funcionando.A página apenas carrega banner.gif e esta imagem nunca é alterada para loading.gif.Não consigo entender por que, alguma ajuda, por favor?!

Obrigado!

Foi útil?

Solução

A razão pela qual isso não funciona é que você está tentando adicionar um filho e remover um filho que não é filho.

Você está tentando remover o filho denominado BANNER do elemento denominado BANNER.

Obviamente o elemento denominado BANNER não possui um filho denominado banner.Você tem duas opções: fornecer o id ao elemento filho e chamar `banner.parent.removeChild(banner) ou o seguinte:

Trecho de exemplo

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

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

Outras dicas

Acho que o seu problema é que você está tentando remover um filho que não existe no bannerElement.

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

Viu como você está criando uma nova imagem e depois removendo-a, mesmo que ainda não a tenha anexado?Acho que você deveria tentar algo assim:

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" />
...
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top