Сравнение createElement и innerHTML в JavaScript

В этом руководстве вы узнаете разницу между innerHTML и createElement() в JavaScript, когда дело доходит до создания новых элементов в дереве DOM.

1) createElement более эффективен

Предположим, что у вас есть элемент div с контейнером класса:

<div class="container"></div>

Вы можете добавить новые элементы в элемент div, создав элемент и добавив его:

let div = document.querySelector('.container');

let p = document.createElement('p');
p.textContent = 'JS DOM';
div.appendChild(p);

Вы также можете манипулировать HTML-кодом элемента напрямую, используя innerHTML следующим образом:

let div = document.querySelector('.container');
div.innerHTML += '<p>JS DOM</p>';

Использование innerHTML чище и короче, если вы хотите добавить атрибуты к элементу:

let div = document.querySelector('.container');
div.innerHTML += '<p class="note">JS DOM</p>';

Однако использование innerHTML заставляет веб-браузеры повторно анализировать и воссоздавать все узлы DOM внутри элемента div. Следовательно, это менее эффективно, чем создание нового элемента и добавление его в div. Другими словами, создание нового элемента и добавление его в дерево DOM обеспечивает лучшую производительность, чем innerHTML.

2) createElement более безопасен

Как упоминалось в руководстве по innerHTML, вы должны использовать его только тогда, когда данные поступают из надежного источника, такого, как база данных.

Если вы установите содержимое, над которым у вас нет контроля  для innerHTML, вредоносный код может быть внедрен и выполнен.

3) Использование DocumentFragment для создания узлов DOM

Предполагая, что у вас есть список элементов, и вам нужно на каждой итерации:

let div = document.querySelector('.container');

for(let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   div.appendChild(p);
}

Этот код приводит к пересчету стилей, рисунков и макетов на каждой итерации. Это не очень эффективно.

Чтобы преодолеть это, вы обычно используете DocumentFragment для создания узлов DOM и добавления их к дереву DOM:

let div = document.querySelector('.container');

// compose DOM nodes
let fragment = document.createDocumentFragment();
for(let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   fragment.appendChild(p);
}

// append the fragment to the DOM tree
div.appendChild(fragment);

В этом примере мы составили узлы DOM, используя объект DocumentFragment, и один раз в конце добавили фрагмент к активному дереву DOM.

Фрагмент документа не связан с активным DOM-деревом, поэтому не влияет на производительность.