Javascript jsperf:Uncaught HierarchyRequestError:未能执行'；追加儿童'；在'；节点'；：此节点类型不支持此方法

我正在尝试从

文档中暂时分离容器是否可以加快更改其内容（删除/附加多个元素）。但是在控制台中为我工作的代码在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 = 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);

listElement=container.removeChild（listElement）；
while（liselement.firstChild）
liselement.removeChild（liselement.firstChild）；
var新列表项；
对于（var j=100；j<200；j++）{
newListItem=document.createElement（'li'）；
appendChild（document.createTextNode（j））；
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);
}

while（liselement.firstChild）
liselement.removeChild（liselement.firstChild）；
var新列表项；
对于（var j=100；j<200；j++）{
newListItem=document.createElement（'li'）；
appendChild（document.createTextNode（j））；
appendChild（newListItem）；
}

我得到的错误是：

未捕获的HierarchyRequestError:无法在上执行“appendChild”
“节点”：此节点类型不支持此方法


消息：Uncaught HierarchyRequestError:未能在“节点”上执行“appendChild”：此节点类型不支持此方法
文件名：
行号：12

如果我注释掉行
listElement.appendChild（newListItem），它就会消失

通过
调试器添加断点行向我显示
liselement
某种程度上是一个文本节点。
好的，我在发布这篇文章时发现了这一点：使用

var listElement = container.firstElementChild;

而不是

var listElement = container.firstChild;

修正了这个问题。问题的根源是html中的空白

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




这使
container.firstChild
成为一个文本节点，其中包含text
“\n”
。当我在没有jsperf的情况下测试它时，可能忽略了空格

希望这可能对其他搜索此错误的人有所帮助。
好的，我在发布此消息时发现了这一点：使用

var listElement = container.firstElementChild;

而不是

var listElement = container.firstChild;

修正了这个问题。问题的根源是html中的空白

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




这使
container.firstChild
成为一个文本节点，其中包含text
“\n”
。当我在没有jsperf的情况下测试它时，可能忽略了空格

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