**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 [oliferna][2] 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][3]

**Gráfico:**

[![inserir a descrição da imagem aqui][4]][4]

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][1]




[Compartibilidade do insertAdjacentHTML][5]

 Referencias: [innerHTML += …” vs “appendChild(txtNode)][6]


  [1]: https://jsfiddle.net/davidchase03/3mLFm/
  [2]: http://stackoverflow.com/users/1686306/oliferna
  [3]: http://jsperf.com/appendchild-vs-innerhtml-sopt
  [4]: https://i.sstatic.net/nyO1O.png
  [5]: http://caniuse.com/#search=insertAdjacentHTML
  [6]: http://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode