JavaScript .removechild & .appendChild не работает

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

Вопрос

Я пытаюсь получить очень простую функцию 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.Я не могу понять, почему, какая-то помощь пожалуйста?!

Спасибо!

Это было полезно?

Решение

Причина, по которой это не работает, это вы пытаетесь добавить ребенка и удалить ребенка, который не ребенок.

Вы пытаетесь удалить ребенка по имени баннера из элемента именованного баннера.

Очевидно, что элемент имени Баннер не имеет ребенка имени баннера.У вас есть два варианта, либо дайте идентификатор дочернего элемента и вызовите `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);
.

Другие советы

Я думаю, что ваша проблема заключается в том, что вы пытаетесь удалить ребенка, который не существует в 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" />
...
.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top