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.

这是一个清理了代码的 JSFiddle，我将其添加到文档的正文中，并设置了实际呈现的内部内容。

如果你想在 上做#column_left，它会是这样的：

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