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

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