javascript - usar - La forma preferida de crear un nuevo elemento con jQuery.

jquery ejemplos basicos

Question

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

Ya sea:

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

O:

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

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

Answer 1

La primera opción te da más flexibilidad:

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

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

Otra buena práctica es prefijar tus variables jQuery con $ :
¿Hay alguna razón específica detrás de usar $ con variable en jQuery?

La colocación de comillas alrededor del nombre de la propiedad "class" lo hará más compatible con los navegadores menos flexibles.

Answer 2

Manera mucho más expresiva,

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

Referencia: Docs

Answer 3

Personalmente creo que es más importante que el código sea legible y editable que performante. Cualquiera que encuentre 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 trucos, notas y mejores prácticas útiles de jQuery

Answer 4

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

Answer 5

Según la documentación oficial de jQuery.

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

Luego puede usar ya sea appendTo , append , before , after y etc ,. para insertar el nuevo elemento en el DOM.

PS: jQuery Version 1.11.x

Answer 6

Si #box está vacío, nada, pero si no es así, hacen cosas muy diferentes. El primero agregará un div como el último nodo secundario de #box . Este último reemplaza completamente el contenido de #box con un solo div vacío, texto y todo.

Answer 7

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 () y appendChild ().

Answer 8

Tengo una nueva idea, usando .html(content)

Puede colocar un <div></div> vacío previamente en el lugar que desee, no olvide configurar una ID para este DIV.

Después de eso, use $("#divId").html(content) para reemplazar el DIV vacío con su nuevo contenido, que es el DIV que desea agregar.