A maneira preferida de criar um novo elemento com jQuery

227

Eu tenho duas maneiras de criar um <div>uso jQuery.

Ou:

var div = $("<div></div>");
$("#box").append(div);

Ou:

$("#box").append("<div></div>");

Quais são as desvantagens de usar o segundo caminho que não seja a reutilização?

Ashwin
fonte
8
É apenas uma questão de reutilização. Sua chamada.
Roko C. Buljan
@gdoron por reutilização Quero dizer: se você tiver um elemento dentro de uma variável, poderá chamar novamente essa variável sempre que precisar, como no seu exemplo.
Roko C. Buljan
2
Por que .html, mas não .appendno segundo caso?
Engenheiro de
@ Engineer - Desculpe, isso foi um erro aqui. Eu corrigi isso.
Ashwin 16/05
Eu pensei que o último método foi mais rápido em termos de execução de velocidade, mas o primeiro parece (10% ~ 40%) mais rápido: jsperf.com/jquery-append-string-vs-append-jquery-reference
Fabrizio Calderan

Respostas:

339

A primeira opção oferece mais flexibilidade:

var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);

E, claro, .html('*')substitui o conteúdo, enquanto .append('*')não, mas acho que essa não foi sua pergunta.

Outra boa prática é prefixar suas variáveis ​​jQuery com $:
Existe algum motivo específico para o uso de $ with variable no jQuery

Colocar aspas em torno do "class"nome da propriedade a tornará mais compatível com navegadores menos flexíveis.

gdoron está apoiando Monica
fonte
10
Também é uma boa prática iniciar nomes de coleções jQuery com um " $", na minha opinião. Apenas observe que o que você fez não exige $div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");
Comprimidos de explosão
Esses cifrões são necessários ou um erro de digitação? $div. Eu não tinha visto essa sintaxe antes, mas sou novo no Jquery.
Feltro #
Eu sempre uso o $ is a variável é um objeto jquery, $ _ se for uma coleção jQuery e _var se for um contador. O var para variáveis ​​regulares.
Casey
1
Onde está a documentação para essa maneira de criar elemento? $("<div>", {id: "foo", class: "a"});. Eu quero saber se existem outras opções para ele
Saba Ahang
@gdoron, por favor, dê uma olhada na minha pergunta stackoverflow.com/questions/35413044/…
Vixed
74

Pessoalmente, acho que é mais importante que o código seja legível e editável que o desempenho. Qualquer que você achar mais fácil de olhar e deve ser o escolhido para os fatores acima. Você pode escrevê-lo como:

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

E seu primeiro método como:

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

Mas no que diz respeito à legibilidade; a abordagem jQuery é a minha favorita . Siga estas dicas úteis, notas e práticas recomendadas do jQuery

Niranjan Singh
fonte
Obrigado por esse link para a referência do jQuery na criação de novos elementos HTML . TÃO difícil de pesquisar no Google por isso.
Bob Stein
Melhor fazê-lo como: stackoverflow.com/a/43719563/383904
Roko C. Buljan
25

Maneira muito mais expressiva,

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

Referência: Documentos

Darshan
fonte
4
classdeve estar entre aspas, de acordo com os documentos (via link do Documentos acima): "O nome" classe "deve ser citado no objeto, pois é uma palavra reservada para JavaScript, e" className "não pode ser usado, pois se refere à propriedade DOM , não o atributo ".
Isaac Gregson
5

De acordo com a documentação oficial do jQuery

Para criar um elemento HTML, $("<div/>")ou $("<div></div>")é o preferido.

Então você pode usar appendTo, append, before, aftere etc ,. para inserir o novo elemento no DOM.

PS: jQuery versão 1.11.x

Alan Dong
fonte
2

De acordo com a documentação para 3.4 , é preferível usar atributos com o attr()método

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});
Anuradha Mudalige
fonte
Eu adicionei citações. Se você não colocar classaspas, isso falhará silenciosamente e poderá resultar em insanidade.
John Henckel
0

Eu recomendaria a primeira opção, na qual você realmente cria elementos usando o jQuery. a segunda abordagem simplesmente define a propriedade innerHTML do elemento como uma string, que por acaso é HTML, e é mais suscetível a erros e menos flexível.

jbabey
fonte
1
@Ash com a segunda abordagem, você pode equivocadamente acabar com todos os outros filhos do recipiente que você está modificando: jsfiddle.net/jbabey/RBXq5/1
jbabey
0

Se #boxestiver vazio, nada, mas se não for, eles fazem coisas muito diferentes. O primeiro adicionará um divcomo o último nó filho de #box. O último substitui completamente o conteúdo de #boxum único divtexto vazio e tudo.

Comprimidos de explosão
fonte
Oh .. Eu mea não usar append aqui;)
Ashwin
0

Também é possível criar um elemento div da seguinte maneira:

var my_div = document.createElement('div');

adicionar classe

my_div.classList.add('col-10');

também pode executar append()eappendChild()

nabila_ahmed
fonte