javascript - jsperf : Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node' : This node type does not support this method

Question

我正在尝试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);
}

我得到的错误是:

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method..

• message: Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
• fileName: https://jsperf.com/updating-lists-with-and-without-detaching/1
• lineNumber: 12

如果我注释掉该行 listElement.appendChild(newListItem);

通过 debugger; 添加断点显示 listElement 在某种程度上是一个文本节点..

Answer 1

好吧，我在发布此内容时已经弄清楚了这一点:使用

var listElement = container.firstElementChild;

而不是

var listElement = container.firstChild;

解决了这个问题。问题的根源是 html 中的空格

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

这使得 container.firstChild 成为一个带有文本 '\n ' 的文本节点。当我在没有 jsperf 的情况下测试这个时，可能我省略了空格。

希望这对搜索此错误的其他人有所帮助。