appendChild vs innerHTML
O appendChild
não causa uma reconstrução completa do DOM ou mesmo todos os elementos / nós dentro do alvo.
O innerHTML
causar uma reconstrução completa do conteúdo do elemento de destino, que se você está anexando é desnecessário.
Consequentemente, se for utilizar innerHTML += content
irá fazer o re-parse de todo o HTML, uma boa pratica poderia ser a iteração em uma variável para acrescentar no html de uma só vez, Entretanto realizar o parse é uma tarefa do navegador e eles fazem bem rápido.
Em suma, se você está anexando, eu usaria appendChild
ou (insertAdjacentHTML
, veja abaixo).
Se você estiver substituindo, há situações muito válidas, onde usar innerHTML
é uma opção melhor do que criar a árvore de si mesmo por meio da API DOM.
Desempenho
O olifernaoliferna criou um teste realizando a comparação de appendChild vs innerHTML e sem dúvidas o appendChield é o mais rápido!
A operação consiste em acrescentar 12 nós para um parent existente com 1000 children de três formas:
1 - parentNode.innerHTML +=
2 - parentNode.innerHTML =
3 - parentNode.appendChild dentro do loop
jsperf - appendChild vs innerHTML
Gráfico:
O método com o melhor desempenho é o último. O último método não precisa ler o DOM atual ou analisá-lo.
Finalmente, vale a pena mencionar insertAdjacentHTML, que é uma função que você pode usar para inserir nós e elementos dentro ou ao lado de um elemento usando uma string HTML. Você pode anexar a um elemento com ele:
theElement.insertAdjacentHTML ("beforeEnd", "o HTML vai aqui");
O primeiro argumento é onde colocar o HTML, suas escolhas são:
- beforeBegin
- afterBegin
- beforeEnd
- afterEnd
Exemplo insertAdjacentHTML jsfiddle
Compartibilidade do insertAdjacentHTML
Referencias: innerHTML += …” vs “appendChild(txtNode)innerHTML += …” vs “appendChild(txtNode)