jsperf: Uncaught HierarchyRequestError: Не удалось выполнить 'appendChild' на 'узле': этот тип узла не поддерживает этот метод

Question

Я пытаюсь использовать jsperf, чтобы проверить , может ли временное отсоединение контейнера от 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:Не удалось выполнить appendChild на узле. Этот тип узла не поддерживает этот метод.

• сообщение: Uncaught HierarchyRequestError: Не удалось выполнить appendChild на узле: этот тип узлане поддерживает этот метод.
• 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.

Надеюсь, это может быть полезно для других, ищущих эту ошибку.