34

Recentemente estou criando muita coisa de HTML dinamicamente.

Exemplo

var table = document.createElement('table');
table.style = 'width:500px;border:1px solid #CCC;';
var tbody = document.createElement('tbody');
for(let i = 0; i < 10; i++){
    let tr = document.createElement('tr');

    // 1
    let td = document.createElement('td');
    td.style = 'width:100px;border:1px solid #CCC;';
    let span = document.createElement('span');
    span.innerHTML = 'teste '+(i+1);
    td.appendChild(span);
    tr.appendChild(td);

    // 2
    td = document.createElement('td');
    td.style = 'border:1px solid #CCC;';
    span = document.createElement('span');
    span.innerHTML = 'texto '+(i+1);
    td.appendChild(span);
    tr.appendChild(td);

    tbody.appendChild(tr);
}
table.appendChild(tbody);

document.body.appendChild(table);

Duvida

Vendo algumas perguntas sobre JS vi que na grande maioria o pessoal monta por String

var html = '<table style="width:500px; border:1px solid #ccc">';
html += '<tbody>';
    for(let i = 0; i < 10; i++){
        html += '<tr>';
            html += '<td style="width:100px;border:1px solid #CCC;">';
                html += '<span>teste '+(i+1)+'</span>';
            html += '</td>';
            html += '<td style="border:1px solid #CCC;">';
                html += '<span>texto '+(i+1)+'</span>';
            html += '</td>';
        html += '</tr>';
    }
html += '</tbody>';
html += '</table>';

document.body.innerHTML += html;

  • Quais a diferenças entre estes métodos? (tirando o fato de um ser por Objeto e o outro String)
  • Algum deles é melhor que o outro, ou são equivalentes? (tirando "Eu prefiro assim pois...")
1
  • 9
    Dica: se você está realamente escrevendo muito HTML dinâmico, a abordagem está errada, pois está gastando tempo e possivelmente introduzindo bugs fazendo algo que já foi pensado por outras pessoas. Seria melhor usar uma biblioteca de templates ou um framework como Angular ou React, sendo o importante fazer uma separação dos dados da aplicação da lógica de renderização.
    – utluiz
    Commented 31/03/2016 às 22:25

3 Respostas 3

37
+50

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 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:

inserir a descrição da imagem aqui

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)

2
  • 2
    Procure citar as fontes, quando traduzir um conteúdo do SO. stackoverflow.com/questions/2305654/…
    – denis
    Commented 5/04/2016 às 21:01
  • 2
    @denis isso, estava procurando por este link, tinha criado esta resposta com base na resposta do T.J. Crowder mas quando fui adicionar as referencias nao consegui encontrar mais este link, estava em um laboratorio na faculdade que limpa os historicos. Commented 5/04/2016 às 21:19
8

Eu costumo gerar sempre via string. Monto sempre identado para que eu tenha, assim que bater o olho, a visão do que aquelo código representa.

Exemplo:

var htmlTabela = "<table>                   " +
                 "    <tr>                  " +
                 "        <td> Titulo </td> " +
                 "    </tr>                 " +
                 "</table>                  " ;

Fazendo dessa forma fica muito mais fácil a manutenção e compreensão por outros programadores em relação a criação através de objetos.

E no caso de, por algum motivo, eu precisar ter um objeto eu utilizo jQuery para transforma-lo, basta fazer isso:

var objetoJquery = $(htmlTabela);

Dessa forma consigo ter o objeto e utilizar todo o poder do jQuery para modifica-lo.

1
  • Cara que maneiro, por fim o HTML é uma linguagem bem "flexível" assim dizendo não é mesmo? Commented 4/04/2016 às 16:31
7

Bom dia, bom, imagine a situação que você tem uma tabela que possui temas diferentes de acordo com o horário, de dia a tabela é clarinha e de noite a tabela é mais escura, você terá classes para esta tabela diferentes, ou seja, no seu segundo código, você usa strings extensas com style diretamente no html, agora vamos supor que você não use o style, mas na propria string coloque lá "class=table_day", já melhorou seu código, porém, e quando você for mudar a classe? terá que ter outra string inteira pra esta mudança, por este motivo de exemplo eu prefiro a criação de elementos com JS puro em que eu uso os setAttributes passando minhas classes que são variaveis que posso mudar facilmente , gera uma boa manutenibilidade de seu código...

lembrando que este é apenas o meu ponto de vista...

Espero que tenha ajudado! Abraços;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .