JavaScript .removechild & .appendchild non funziona

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

Domanda

Sto cercando di ottenere una funzione JavaScript molto semplice per lavorare che cambierà un'immagine per un altro usando .removechild e .appendchild.Il mio codice è il seguente: 

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

Tuttavia, non funziona.La pagina si carica appena con banner.gif e questa immagine non viene mai modificata in caricamento .gif.Non riesco a capire perché, alcuni aiutano Pls ?!

Grazie!

È stato utile?

Soluzione

Il motivo per cui questo non funziona è che stai cercando di aggiungere un bambino e rimuovere un bambino che non è un bambino.

Si sta tentando di rimuovere il bambino denominato Banner dall'elemento denominato Banner.

Ovviamente l'elemento denominato Banner non ha un figlio nominato Banner.Hai due scelte o dare l'ID all'elemento figlio e chiama "Banner.Parent.removechild (Banner) o quanto segue:

Snippet di esempio 

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

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

Altri suggerimenti

Penso che il tuo problema sia che stai cercando di rimuovere un bambino che non esiste nell'annerellement. 

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

Guarda come stai facendo una nuova immagine e poi lo rimuovi, anche se non l'hai ancora aggiunto?Penso che dovresti provare qualcosa del genere: 

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top