Javascript .removeChild & .appendChild не работает - PullRequest
Новая
       41

Javascript .removeChild & .appendChild не работает

0 голосов
/ 13 мая 2011

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

Спасибо!

Ответы [ 2 ]

2 голосов
/ 13 мая 2011

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

Вы пытаетесь удалить дочерний элемент с именем BANNER из элемента с именем BANNER.

Очевидно, что элемент с именем BANNER не имеет дочернего элемента с именем banner.У вас есть два варианта: либо дать идентификатор дочернему элементу и вызвать `banner.parent.removeChild (banner), либо следующее:

Пример фрагмента 

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

bannerElement.removeChild(child);
bannerElement.appendChild(loading);
0 голосов
/ 13 мая 2011

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