jspef:未捕获的hierarchyRequestError:未能在“node”上执行“appendChild”:此节点类型不支持此方法

我正在努力 use jsperf to check 是否暂时从 document 可能会加速更改其内容(删除/附加多个元素)。但是在控制台中为我工作的代码在JSPerf中给了我一个错误。

制备:

<div id="container">
    <ul></ul>
</div>

// fill the list
var container = document.querySelector('#container');
var listElement = container.firstChild;
var initialContent = "";
for(var i = 0; i < 100; i++)
    initialContent += `<li>${i+1}</li>`;
listElement.innerHTML = initialContent;

拆卸(重要的是不要使用 listElement.innerHTML = '' ):

while(listElement.firstChild)
    listElement.removeChild(listElement.firstChild);

要配置的主代码:

listElement = container.removeChild(listElement);
while(listElement.firstChild)
    listElement.removeChild(listElement.firstChild);
var newListItem;
for(var j = 100; j < 200; j++) {
    newListItem = document.createElement('li');
    newListItem.appendChild(document.createTextNode(j));
    listElement.appendChild(newListItem);
}
container.appendChild(listElement);

要比较的代码:

while(listElement.firstChild)
    listElement.removeChild(listElement.firstChild);
var newListItem;
for(var j = 100; j < 200; j++) {
    newListItem = document.createElement('li');
    newListItem.appendChild(document.createTextNode(j));
    listElement.appendChild(newListItem);
}

我得到的错误是:

未捕获的HierarchyRequestError:未能对执行“AppendChild” “node”:此节点类型不支持此方法。

• 消息:未捕获的HierarchyRequestError:未能在“节点”上执行“AppendChild”:此节点类型不支持此方法。
• 文件名: https://jsperf.com/updating-lists-with-and-without-detaching/1
• 林数:12

如果我对这句话发表评论,它就会消失。 listElement.appendChild(newListItem);

通过添加断点 debugger; 行显示了这一点 listElement 不知何故是文本节点..