A maneira preferida de criar um novo elemento com jQuery

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?

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.

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

Maneira muito mais expressiva,

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

Referência: Documentos

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

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
});

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.

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.

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()