Javascript appendChild (div): confusion

Question

Я пытаюсь показать тот же загрузчик, который используется при «загрузке страницы» после нажатия кнопки «отправить».

В самом верху страницы, у меня есть:

<div id="gabbia"><div id="load_screen"><div id="loader"></div></div></div>

(«Gabbia» это просто контейнер, а «load_screen» и «Загрузчик» отформатирован с помощью CSS, чтобы получить хорошее «вращающееся колесо «)

у меня есть этот скрипт:

var gabbia = document.getElementById("gabbia"); 
var load_screen = document.getElementById("load_screen"); 
var loader = document.getElementById("loader"); 

window.addEventListener("load", function() { 
     gabbia.removeChild(gabbia.childNodes[0]); 
    }); 

function show_loader() { 
      var cont = document.getElementById("gabbia"); 
      cont.appendChild(load_screen); 
      var subcont = document.getElementById("load_screen"); 
      subcont.appendChild(loader); 
     } 

кажется, что на show_loader() вызова, первый DIV (load_screen) добавляется, а второй (загрузчик) не добавляется как дочерний элемент для восстановления загрузчика.

Я никогда не использовал javascript раньше, извините. Спасибо за вашу помощь, чтобы понять.

Answer 1

Я не знаю, была ошибка. Я верю, потому что вы использовали document.getElementById в неправильном положении (до загрузки страницы). Я хотел бы сделать (более легкий + эффективный способ с использованием CSS):

window.addEventListener("load",loader); 

function loader(val) { 
    document.getElementById("gabbia").style.display=val?"block":"none"; 
} 

Использование так:

loader();//hide 
loader(false)//hide 
loader(true)//show