La forma preferida de crear un nuevo elemento con jQuery

Tengo 2 formas en que puedo crear un <div>uso jQuery.

Ya sea:

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

O:

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

¿Cuáles son los inconvenientes de usar una segunda vía que no sea la reutilización?

La primera opción le brinda más flexibilidad:

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

Y, por supuesto, .html('*')anula el contenido mientras .append('*')que no, pero supongo que esta no era tu pregunta.

Otra buena práctica es prefijar sus variables jQuery con $:
¿Hay alguna razón específica para usar $ with variable en jQuery?

Colocar comillas alrededor del "class"nombre de la propiedad lo hará más compatible con navegadores menos flexibles.

Personalmente, creo que es más importante que el código sea legible y editable que performant. Cualquiera que le resulte más fácil de ver y debe ser el que elija para los factores anteriores. Puedes escribirlo como:

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

Y tu primer 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);

Pero en lo que respecta a la legibilidad; El enfoque jQuery es mi favorito . Siga estos útiles trucos, notas y mejores prácticas de jQuery

Mucho más expresivo,

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

Referencia: documentos

Según la documentación oficial de jQuery

Para crear un elemento HTML, $("<div/>")o$("<div></div>") se prefiere.

A continuación, puede utilizar cualquiera de los dos appendTo, append, before,after y etc ,. para insertar el nuevo elemento al DOM.

PS: jQuery Versión 1.11.x

De acuerdo con la documentación de 3.4 , se prefiere utilizar atributos con 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
});

Recomendaría la primera opción, donde realmente construyes elementos usando jQuery. El segundo enfoque simplemente establece la propiedad innerHTML del elemento en una cadena, que resulta ser HTML, y es más propensa a errores y menos flexible.

Si #boxestá vacío, nada, pero si no es así, hacen cosas muy diferentes. El primero agregará a divcomo el último nodo hijo de #box. Este último reemplaza completamente el contenido de #boxun solo vacío div, texto y todo.

También es posible crear un elemento div de la siguiente manera:

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

agregar clase

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

también puede realizar append()yappendChild()