javascript - 从对象数组构建列表未捕获类型错误: Cannot read property 'appendChild' of null

Question

我不明白为什么会出现此错误。我有一个有效的脚本，它从 xml 文件构建一个无序列表。然后我将该列表存储在本地存储中，并且在刷新时，我只想从存储中构建该列表。在这两种情况下构建列表后，我都使用完全相同的脚本，但我得到了

 Uncaught TypeError: Cannot read property 'appendChild' of null

错误

ul.appendChild(li); 

当我尝试从本地存储加载它时。

我尝试了很多重新安排，并查看是否有原因导致它未定义。我想不出一个。同样，当我从 XML 派生数组时，此代码可以工作。一旦我将其字符串化并从存储中解析回来，这个脚本就不会。

    var li = document.createElement("li");
    var retrievedObject = localStorage.getItem('senatorList');
    senatorList = JSON.parse(retrievedObject);
    console.log(senatorList);
    var ul = document.getElementById("members");
    for( var i = 0; i < senatorList.length; i++ )
        { 
        o = senatorList[i];

        li.appendChild(document.createTextNode(o.name));
        li.id = o.name;
        li.setAttribute('draggable', 'true');
        if (o.party == 'Democrat') {
            o.voted = true;
            li.classList.add('democrat');
        } else {
            li.classList.add('republican');
        }
        ul.appendChild(li);    

}

Answer 1

Uncaught TypeError: Cannot read property 'appendChild' of null error at

ul.appendChild(li);

因此，ul 为 null，因此，document.getElementById("members") 返回 null - DOM 中不存在具有此类 ID 的元素。

我猜创建 #members 并将其放入 DOM 的代码存在于“构建”部分中，但在“从存储重建”部分中缺失。