Qual é a maneira mais eficiente de criar elementos HTML usando jQuery?

Recentemente, venho fazendo muitos pop-ups de janela modal e o que não, para o qual usei o jQuery. O método que eu usei para criar os novos elementos na página tem sido esmagadoramente ao longo das linhas de:

$("<div></div>");

No entanto, estou sentindo que esse não é o melhor ou o método mais eficiente de fazer isso. Qual é a melhor maneira de criar elementos no jQuery a partir de uma perspectiva de desempenho?

Esta resposta tem os parâmetros de referência para as sugestões abaixo.

Eu uso $(document.createElement('div')); Benchmarking mostra que esta técnica é a mais rápida. Especulo que isso ocorre porque o jQuery não precisa identificá-lo como um elemento e criar o próprio elemento.

Você realmente deve executar benchmarks com diferentes mecanismos Javascript e pesar seu público com os resultados. Tome uma decisão a partir daí.

pessoalmente, eu sugeriria (para facilitar a leitura):

$('<div>');

alguns números das sugestões até agora (safari 3.2.1 / mac os x):

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms              

Questão:

Qual é a maneira mais eficiente de criar elementos HTML usando jQuery?

Responda:

Como é sobre jQueryisso, acho melhor usar essa abordagem (limpa) (você está usando)

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

DEMO.

Dessa forma, você pode até usar manipuladores de eventos para o elemento específico, como

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

DEMO.

Mas quando você lida com muitos elementos dinâmicos, evite adicionar eventos handlersem um elemento específico. Em vez disso, use um manipulador de eventos delegados, como

$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}

DEMO.

Portanto, se você criar e anexar centenas de elementos com a mesma classe, ou seja, ( myClass), menos memória será consumida para manipulação de eventos, porque apenas um manipulador estará lá para fazer o trabalho para todos os elementos inseridos dinamicamente.

Atualização: Como podemos usar a seguinte abordagem para criar um elemento dinâmico

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

Mas o sizeatributo não pode ser configurado usando essa abordagem usando jQuery-1.8.0ou mais tarde e aqui está um relatório de bug antigo , veja este exemplo usando o jQuery-1.7.2que mostra que o sizeatributo está configurado para 30usar o exemplo acima, mas usando a mesma abordagem que não podemos definir o sizeatributo usando jQuery-1.8.3, aqui é um violino que não funciona . Então, para definir o sizeatributo, podemos usar a seguinte abordagem

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

Ou este

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

Podemos passar attr/propcomo um objeto filho, mas ele funciona em jQuery-1.8.0 and laterversões, verifique este exemplo, mas não funcionará emjQuery-1.7.2 or earlier (não testado em todas as versões anteriores).

BTW, retirado do jQueryrelatório de erro

Existem várias soluções. O primeiro é não usá-lo, pois não economiza espaço e isso melhora a clareza do código:

Eles recomendaram o uso da seguinte abordagem ( funciona também nas anteriores , testadas em 1.6.4)

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

Portanto, é melhor usar essa abordagem, IMO. Esta atualização é feita depois que eu li / encontrei esta resposta e, nesta resposta, mostra que se você usar em 'Size'(capital S)vez de 'size', simplesmente funcionará bem , mesmo emversion-2.0.2

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

Leia também sobre prop , porque há uma diferença, Attributes vs. Propertiesvaria de acordo com as versões.

Na verdade, se você estiver fazendo $('<div>'), o jQuery também usará document.createElement().

(Basta dar uma olhada na linha 117 ).

Há alguma sobrecarga de chamada de função, mas, a menos que o desempenho seja crítico (você está criando centenas [milhares] de elementos), não há muitas razões para voltar ao DOM simples .

Apenas a criação de elementos para uma nova página da web provavelmente é o caso em que é melhor se atentar à maneira do jQuery de fazer as coisas.

Se você tiver muito conteúdo HTML (mais do que apenas uma única div), considere criar o HTML na página em um contêiner oculto, atualizá-lo e torná-lo visível quando necessário. Dessa forma, grande parte da sua marcação pode ser pré-analisada pelo navegador e evitar o atolamento do JavaScript quando chamada. Espero que isto ajude!

Esta não é a resposta correta para a pergunta, mas ainda gostaria de compartilhar isso ...

Usar apenas document.createElement('div')e pular o JQuery melhorará muito o desempenho quando você desejar criar muitos elementos rapidamente e anexar ao DOM.

Acho que você está usando o melhor método, embora possa otimizá-lo para:

 $("<div/>");

Você não precisa de desempenho bruto de uma operação que será executada com pouca frequência do ponto de vista da CPU.

Você precisará entender que a importância do desempenho da criação de elementos é irrelevante no contexto do uso do jQuery.

Lembre-se de que não existe um propósito real de criar um elemento, a menos que você realmente o utilize.

Você pode ficar tentado a testar o desempenho com algo como $(document.createElement('div'))vs. $('<div>')e obter grandes ganhos de desempenho usando$(document.createElement('div')) mas esse é apenas um elemento que ainda não está no DOM.

No entanto, no final do dia, você desejará usar o elemento de qualquer maneira, para que o teste real inclua f.ex. .appendTo ();

Vamos ver, se você testar o seguinte um contra o outro:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

Você notará que os resultados variam. Às vezes, uma maneira tem melhor desempenho que a outra. E isso ocorre apenas porque a quantidade de tarefas em segundo plano no seu computador muda com o tempo.

Teste-se aqui

Portanto, no final do dia, você deseja escolher a maneira menor e mais legível de criar um elemento. Dessa forma, pelo menos, seus arquivos de script serão os menores possíveis. Provavelmente, um fator mais significativo no ponto de desempenho do que a maneira de criar um elemento antes de usá-lo no DOM.

Alguém já fez uma referência: jQuery document.createElement equivalente?

$(document.createElement('div')) é o grande vencedor.

Um ponto é que pode ser mais fácil fazer:

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

Depois, faça tudo isso com chamadas jquery.

Estou usando o jquery.min v2.0.3. É melhor para mim usar o seguinte:

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

como segue:

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

O tempo de processamento do primeiro código é muito menor que o segundo código.