Il modo preferito di creare un nuovo elemento con jQuery

227

Ho 2 modi in cui posso creare un <div>utilizzojQuery .

O:

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

O:

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

Quali sono gli svantaggi dell'usare una seconda via diversa dalla riutilizzabilità?

— Ashwin
fonte

8

È solo questione di riusabilità. La tua chiamata.

— Roko C. Buljan,

@gdoron per riusabilità Voglio dire: se hai un elemento all'interno di una variabile, allora puoi richiamare quel var ovunque tu abbia bisogno, proprio come nel tuo esempio.

— Roko C. Buljan,

2

Perché .html, ma non .appendnel secondo caso?

— Ingegnere

@Engineer - Siamo spiacenti, è stato un errore qui. L'ho corretto.

— Ashwin,

Pensavo che quest'ultimo metodo fosse più veloce in termini di esecuzione della velocità, ma il primo sembra (10% ~ 40%) più veloce: jsperf.com/jquery-append-string-vs-append-jquery-reference

— Fabrizio Calderan,

339

La prima opzione ti dà più flessibilità:

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

E ovviamente .html('*')sovrascrive il contenuto mentre .append('*')non lo fa, ma immagino, questa non era la tua domanda.

Un'altra buona pratica è il prefisso delle variabili jQuery con $:
C'è qualche motivo specifico dietro l'utilizzo di $ con variabile in jQuery

Posizionare le virgolette attorno al "class"nome della proprietà lo renderà più compatibile con browser meno flessibili.

— gdoron sostiene Monica
fonte

10

Anche una buona pratica per iniziare i nomi delle raccolte jQuery con un " $", secondo me. Basta notare che ciò che hai fatto non richiede $div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");

— Pillole di esplosione

Sono necessari quei simboli di dollaro o un refuso? $div. Non ho mai visto quella sintassi prima, ma sono nuovo di Jquery.

— felwithe

Uso sempre $ is la variabile è un oggetto jquery, $ _ se è una raccolta jQuery e _var se è un contatore. Il var per variabili regolari.

— Casey,

1

dov'è la documentazione per questo modo di creare elemento? $("<div>", {id: "foo", class: "a"});. Voglio sapere se ci sono altre opzioni per questo

— Saba Ahang

@gdoron per favore, dare un'occhiata a mia domanda stackoverflow.com/questions/35413044/...

— Vixed

74

Personalmente penso che sia più importante che il codice sia leggibile e modificabile che performante. Qualunque cosa tu trovi più facile da guardare e dovrebbe essere quella che scegli per i fattori di cui sopra. Puoi scriverlo come:

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

E il tuo primo metodo come:

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

Ma per quanto riguarda la leggibilità; l'approccio jQuery è il mio preferito . Segui questi utili trucchi, note e best practice per jQuery

— Niranjan Singh
fonte

Grazie per quel link al riferimento jQuery sulla creazione di nuovi elementi HTML . Così difficile google per quello.

— Bob Stein,

Meglio farlo come: stackoverflow.com/a/43719563/383904

— Roko C. Buljan

25

Modo molto più espressivo,

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

Riferimento: Doc

— darshan
fonte

4

classdovrebbe essere tra virgolette, secondo i documenti (tramite il link Documenti sopra): "Il nome" class "deve essere citato nell'oggetto poiché è una parola riservata JavaScript e" className "non può essere utilizzato poiché si riferisce alla proprietà DOM , non l'attributo ".

— Isaac Gregson,

5

Secondo il documentazione ufficiale di jQuery

Per creare un elemento HTML, $("<div/>")o$("<div></div>") è preferito.

Quindi è possibile utilizzare appendTo, append, before,after ed ecc ,. per inserire il nuovo elemento nel DOM.

PS: jQuery Versione 1.11.x

— Alan Dong
fonte

2

Secondo la documentazione per 3.4 , si preferisce utilizzare gli attributi con il attr()metodo.

$('<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

Ho aggiunto le virgolette. Se non inserisci le classvirgolette, ciò fallirà silenziosamente e potrebbe causare follia.

— John Henckel,

0

Consiglierei la prima opzione, in cui costruisci effettivamente gli elementi usando jQuery. il secondo approccio imposta semplicemente la proprietà innerHTML dell'elemento su una stringa, che risulta essere HTML, ed è più soggetta a errori e meno flessibile.

— jbabey
fonte

1

@Ash con il secondo approccio, potresti cancellare per errore tutti gli altri figli del contenitore che stai modificando: jsfiddle.net/jbabey/RBXq5/1

— jbabey

0

Se #boxè vuoto, niente, ma se non lo è fai cose molto diverse. Il primo aggiungerà a divcome l'ultimo nodo figlio di #box. Quest'ultimo sostituisce completamente il contenuto di #boxcon un singolo divtesto vuoto e tutto.

— Pillole Di Esplosione
fonte

Oh ... non intendo usare Append qui;)

— Ashwin,

0

È anche possibile creare un elemento div nel modo seguente:

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

aggiungi classe

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

anche in grado di eseguire append()eappendChild()

— nabila_ahmed
fonte