Question

我有一个类，应该在页面上显示灰色叠加并显示文本和加载gif。代码如下所示：

function LoadingIcon(imgSrc) {
    var elem_loader = document.createElement('div'),
        elem_messageSpan = document.createElement('span'),
        loaderVisible = false;

    elem_loader.style.position = 'absolute';
    elem_loader.style.left = '0';
    elem_loader.style.top = '0';
    elem_loader.style.width = '100%';
    elem_loader.style.height = '100%';
    elem_loader.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    elem_loader.style.textAlign = 'center';

    elem_loader.appendChild(elem_messageSpan);
    elem_loader.innerHTML += '<br><img src="' + imgSrc + '">';

    elem_messageSpan.style.backgroundColor = '#f00';

    this.start = function () {
        document.body.appendChild(elem_loader);
        loaderVisible = true;
    };

    this.stop = function() {
        if (loaderVisible) {
            document.body.removeChild(elem_loader);
            loaderVisible = false;
        }
    };

    this.setText = function(text) {
        elem_messageSpan.innerHTML = text;
    };

    this.getElems = function() {
        return [elem_loader, elem_messageSpan];
    };
}

问题是，当我使用setText方法时，它设置了elem_messageSpan的innerHTML，但它没有反映到附加到elem_loader的span。您可以使用getElems方法找出两个元素包含的内容。

问题出在哪里？因为我没有看到为什么这不起作用的单一原因。

<小时/> 编辑：我称之为：

var xml = new CwgParser('cwg.geog.cz/cwg.xml'),
    loader = new LoadingIcon('./ajax-loader.gif');
xml.ondataparse = function() {
    loader.stop();
    document.getElementById('cover').style.display = 'block';
};
loader.setText('Loading CWG list...');
loader.start();
xml.loadXML();

xml.loadXML（）函数通常需要3到8秒才能执行（基于客户端的下载速度），这就是我显示加载图标的原因。

对Javascript创建的元素的更改不会反映到DOM

0 个答案: