JavaScript .Removechild & .appendchild no funciona

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

Pregunta

Estoy tratando de obtener una función de JavaScript muy simple para trabajar que cambiará una imagen para otro usando .Removechild y .appendchild.Mi código es el siguiente: 

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

Sin embargo, no está funcionando.La página solo se carga con banner.gif y esta imagen nunca se cambia a loading.gif.No puedo averiguar por qué, ¿algunos ayudan por pls?!

¡Gracias!

¿Fue útil?

Solución

La razón por la que esto no funciona es que está tratando de agregar un niño y eliminar a un niño que no es un niño.

Está tratando de eliminar al niño llamado Banner del elemento llamado Banner.

Obviamente, el elemento llamado Banner no tiene un niño llamado Banner.Tienes dos opciones, le dan la identificación al elemento secundario y llame a `banner.Parent.Removechild (banner) o lo siguiente:

Ejemplo Snipet 

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

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

Otros consejos

Creo que su problema es que está tratando de eliminar a un niño que no existe en la banderelación. 

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

¿Ves cómo estás haciendo una nueva imagen y luego eliminándola, aunque aún no lo agregaste?Creo que deberías probar algo como esto: 

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 bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top