JavaScript innerHTML versus createElement

Resumo : neste tutorial você aprenderá a diferença entre innerHTMLe createElement()quando se trata de criar novos elementos na árvore DOM.

#1) createElement tem mais desempenho

Suponha que você tenha um divelemento com a classe container:

<div class="container"></div>Linguagem de código:  HTML, XML  ( xml )

Você pode adicionar novos elementos ao divelemento criando um elemento e anexando-o:

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

let p = document.createElement('p');
p.textContent = 'JS DOM';
div.appendChild(p);Linguagem de código:  JavaScript  ( javascript )

Você também pode manipular o HTML de um elemento diretamente usando innerHTMLassim:

let div = document.querySelector('.container');
div.innerHTML += '<p>JS DOM</p>';Linguagem de código:  JavaScript  ( javascript )

Usar innerHTMLé mais limpo e curto quando você deseja adicionar atributos ao elemento:

let div = document.querySelector('.container');
div.innerHTML += '<p class="note">JS DOM</p>';Linguagem de código:  JavaScript  ( javascript )

No entanto, usar o innerHTMLfaz com que os navegadores da web analisem novamente e recriem todos os nós DOM dentro do elemento div. Portanto, é menos eficiente do que criar um novo elemento e anexar ao div. Em outras palavras, criar um novo elemento e anexá-lo à árvore DOM fornece melhor desempenho do que o innerHTML.

#2) createElement é mais seguro

Conforme mencionado no tutorial innerHTML, você deve usá-lo somente quando os dados vierem de uma fonte confiável, como um banco de dados.

Se você definir o conteúdo sobre o qual não tem controle para o innerHTML, o código malicioso poderá ser injetado e executado.

#3) Usando DocumentFragment para compor nós DOM

Supondo que você tenha uma lista de elementos e precise em cada iteração:

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

for (let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   div.appendChild(p);
}Linguagem de código:  JavaScript  ( javascript )

Este código resulta no recálculo de estilos, pintura e layout a cada iteração. Isso não é muito eficiente.

Para superar isso, você normalmente usa a DocumentFragmentpara compor nós DOM e anexá-los à árvore 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);Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, compomos os nós DOM usando o DocumentFragmentobjeto e anexamos o fragmento à árvore DOM ativa uma vez no final.

Um fragmento de documento não está vinculado à árvore DOM ativa, portanto, não incorre em nenhum desempenho.

Confira o DocumentFragmenttutorial para mais detalhes.