在javascript中在數組內打印對象

Question

我有一個名為list的數組，正在其中輸入幾個對象。 每個項目都有唯一的ID和標題。

var number = 0;
var list = [];
var item = {};
var i;

var compute = {
    number : 0,
    newItem : function (input) {
        for (i = 0; i < list.length + 1; i++) {
            var item = {
                id: number,
                title: input
            };
        }
        number++;
        list.push(item);
    }
};

然后將數據添加到數組中，如下所示：

compute.newItem("Something Important");
compute.newItem("Another thing"); 

我正在嘗試將此數組的內容打印到HTML列表中，如下所示：

<ul id="list">
    <li>Something Important</li>
    <li>Another thing</li>
</ul>

依此類推，將每個對象打印到其自己的list元素中。 我不確定如何正確打印此內容？ 有什么想法嗎？

我以為這樣的事情可能會奏效，但出現錯誤。

var content;
for (i = 0; i < list.length + 1; i++) {
    content += "<li>" + list[i] + "</li>";
}
document.getElementById("list").innerHTML = content;

錯誤是：無法將屬性'innerHTML'設置為null

（請注意，我的JavaScript可能會很爛...我是這種語言的新手。）

Answer 1

HTML：

<ul id="list"></ul>

JavaScript：

var compute = {
    list : [],
    newItem : function (input) {
        this.list.push({
            id : this.list.length,
            title : input
        });
    },
    printList : function (el) {
        var ul;
        ul = el || document.createElement('ul');
        for (i = 0; i < this.list.length; i += 1) {
            ul.innerHTML += '<li>' + this.list[i].title + '</li>';
        }
        return ul;
    }
};

compute.newItem('foo');
compute.newItem('bar');
compute.printList(document.getElementById('list'));