La forma preferida de crear un nuevo elemento con jQuery

227

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?

— Ashwin
fuente

8

Es solo cuestión de reutilización. Tu llamada.

— Roko C. Buljan

@gdoron por reutilización Quiero decir: si tiene un elemento dentro de una variable, puede volver a llamar a esa var donde lo necesite, como en su ejemplo.

— Roko C. Buljan

2

¿Por qué .html, pero no .appenden el segundo caso?

— Ingeniero

@ Ingeniero - Lo siento, eso fue un error aquí. Lo corregí.

— Ashwin

Pensé que el último método era más rápido en términos de velocidad de ejecución, pero el primero parece (10% ~ 40%) más rápido: jsperf.com/jquery-append-string-vs-append-jquery-reference

— Fabrizio Calderan

339

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.

— gdoron está apoyando a Monica
fuente

10

También es una buena práctica comenzar los nombres de la colección jQuery con un " $", en mi opinión. Solo señalando que lo que has hecho no requiere $div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");

— Píldoras de explosión

¿Son necesarios esos signos de dólar o un error tipográfico? $div. No he visto esa sintaxis antes, pero soy nuevo en Jquery.

— Felwithe

Siempre uso $ es la variable es un objeto jquery, $ _ si es una colección jQuery y _var si es un contador. La var para las variables regulares.

— Casey

1

¿Dónde está la documentación para esta forma de crear elementos? $("<div>", {id: "foo", class: "a"});. Quiero saber si hay otras opciones para ello

— Saba Ahang

@gdoron por favor, eche un vistazo a mi pregunta stackoverflow.com/questions/35413044/…

— Vixed

74

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

— Niranjan Singh
fuente

Gracias por ese enlace a la referencia de jQuery sobre la creación de nuevos elementos HTML . Tan difícil de google para eso.

— Bob Stein

Mejor hacerlo: stackoverflow.com/a/43719563/383904

— Roko C. Buljan

25

Mucho más expresivo,

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

Referencia: documentos

— Darshan
fuente

44

classdebe estar entre comillas, de acuerdo con los documentos (a través del enlace de Documentos anterior): "El nombre" clase "debe estar entre comillas en el objeto ya que es una palabra reservada de JavaScript, y" className "no se puede usar ya que se refiere a la propiedad DOM , no el atributo ".

— Isaac Gregson

5

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

— Alan Dong
fuente

2

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

— Anuradha Mudalige
fuente

Agregué citas. Si no pone classcomillas, esto fallará silenciosamente y puede resultar en locura.

— John Henckel

0

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.

— jbabey
fuente

1

@Ash con el segundo enfoque, puede eliminar por error a todos los demás elementos

— secundarios

0

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.

— Píldoras de explosión
fuente

Oh ... no quiero usar agregar aquí;)

— Ashwin

0

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

— nabila_ahmed
fuente