Javascript appendChild (div) : confusion

Question

我试图在按下“提交”按钮后显示用于“页面加载”的相同加载器。

在页面的最顶部我有:

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

(“gabbia”只是一个容器，而“load_screen”和“loader”是用 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)，而第二个 (loader) 没有作为子项添加以重建加载器。

抱歉，我以前从未使用过 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