javascript - 对象没有方法 'appendChild'

Question

当我将一个 div 发送到一个为文档片段创建内容的函数时，当我将该片段附加到 div 时，它会向我提供此错误。

Object column_left has no method 'appendChild' ' 

这是我的代码:

function progress_bar(parent_div){      
    var frag = document.createDocumentFragment();
    var d = document.createElement('div');
        d.className = 'progress_bg';
        d.style.width = '90%';
    frag.appendChild(d);
    parent_div.appendChild(frag);
}

函数是这样调用的:

var d = document.getElementById('column_left');
progress_bar(d);    

有人知道为什么我不能这样追加吗？

Answer 1

在调用 progress_bar(d) 之前，#column_left 还不存在，因此 d 未定义。由于您将 undefined 值传递给 progress_bar，因此您无法对其调用 appendChild。

为了解决这个问题，您要么必须先创建 #column_left，要么选择一个预先存在的元素，例如 document.body。

Here是一个清理了代码的 JSFiddle，我做了它，所以它附加到文档的主体，并且还设置了实际呈现的内容。

如果你想在 #column_left 上做，应该是这样的:

var el = document.createElement('div');
el.id = 'column_left';
document.body.appendChild(el);
progress_bar(el);