Question

以下javascript运行onload：

var shop_checkout = {
    setup: function() {
        var img = document.createElement('img');
        img.src = '/public/styles/images/confirm_payment.png';
        img.id  = 'confirm_payment';
        img.alt = 'Confirm Payment: submit order and charge my card';
        var span = app.get('submit_checkout');
        console.log('found the span');
        span.innerHTML = '';
        console.log('emptied the span');
        span.appendChild(img);
        console.log('appended the image');
        img.onclick = shop_checkout.onsubmit;
        console.log('set the onclick');
    },
    onsubmit: function() {
        // irrelevant
    },
    submitted: function() {
        // irrelevant
    },
    oncheckout: function(json, status) {
        // irrelevant
    }
};

app.onload(shop_checkout.setup);

（app.onload()是一个简单的函数，它构建了一个在加载时触发的函数列表，app.get()是document.getElementById()的简单快捷方式。这显示在底部。）

大多数时候，这很有效。它一次又一次地消除了跨度，但无法附加图像。产生的错误消息是：“未捕获错误：NotFoundError：DOM异常8”。

现在，DOM Exception 8是一个未找到错误，这表明img不存在，即使我之前只创建了几行。可能会发生什么？

我猜测img DOM元素不一定存在，即使引用它的变量确实存在。是对的吗？我能做些什么呢？

以下是应用代码：

var app = {
    get: function(id) {
        return document.getElementById(id);
    },
    onload: function(func) {
        // http://www.dustindiaz.com/top-ten-javascript/
        var oldonload = window.onload;
        if (typeof window.onload !== 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            };
        }
    }
};

Answer 1

看起来您的<span>元素永远不会附加到DOM。如果它们来自文档（<html>），您只能按ID查找内容。

在尝试查找附加到其上的任何内容（直接或后代）之前，请务必将<span>附加到文档中。

为什么我刚刚创建DOM元素时不存在？

1 个答案: