innerHTML ou createElement: qual o melhor?

Gustavo Paes, 09/07/2011

É aquela história história de sempre: depende. Fiz alguns testes no site jsperf para descobrir qual a melhor versão. A conclusão é a seguinte: O innerHTML é muito mais rápido quando se utiliza apenas uma vez, ou seja, quando se concatena todo o conteúdo que será criado em uma string e só depois usa o innerHTML. Se isso não for possível, com toda certeza, utilize o createElement com o appendChild, que são muito mais eficientes em loop do que o innerHTML

Guardar referências em variáveis

O teste serviu também para mostrar o quão importante é guardar referências de elementos HTML em uma variável para evitar o processamento do DOM novamente. Por exemplo, dentro de um for para que utilizar sempre o getElementById("meu-id") se é possível fazer isso apenas uma vez fora do for guardando a referência em uma variável. javascript // modo errado for (letter in items) document.getElementById("my-list").appendChild( ... ); // modo certo var elem = document.getElementById("my-list"); for (letter in items) elem.appendChild( ... ); Essa pequena mudança traz um ganho considerável no processamento do seu script.