La façon préférée de créer un nouvel élément avec jQuery


227

J'ai 2 façons de créer une <div>utilisation jQuery.

Soit:

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

Ou:

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

Quels sont les inconvénients de l'utilisation d'une seconde voie autre que la réutilisation?


8
C'est juste une question de réutilisabilité. Ton appel.
Roko C. Buljan

@gdoron par réutilisabilité, je veux dire: si vous avez un élément à l'intérieur d'une variable, vous pouvez renommer ce var où vous en avez besoin, comme dans votre exemple.
Roko C. Buljan

2
Pourquoi .html, mais pas .appenddans le 2ème cas?
Ingénieur

@Engineer - Désolé, c'était une erreur ici. J'ai corrigé cela.
Ashwin

Je pensais que cette dernière méthode était plus rapide en termes d'exécution de la vitesse mais la première semble (10% ~ 40%) plus rapide: jsperf.com/jquery-append-string-vs-append-jquery-reference
Fabrizio Calderan

Réponses:


339

La première option vous donne plus de flexibilité:

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

Et bien sûr, .html('*')remplace le contenu .append('*'), mais je suppose que ce n'était pas votre question.

Une autre bonne pratique consiste à préfixer vos variables jQuery avec $: Y a -
t-il une raison spécifique derrière l'utilisation de $ with variable dans jQuery

Placer des guillemets autour du "class"nom de la propriété la rendra plus compatible avec les navigateurs moins flexibles.


10
C'est aussi une bonne pratique pour démarrer les noms de collection jQuery avec un " $", à mon avis. Juste en notant que ce que vous avez fait ne nécessite pas $div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");
Pilules d'explosion

Ces signes dollar sont-ils nécessaires ou une faute de frappe? $div. Je n'ai jamais vu cette syntaxe auparavant, mais je suis nouveau sur Jquery.
felwithe

J'utilise toujours le $ si la variable est un objet jquery, $ _ s'il s'agit d'une collection jQuery et _var s'il s'agit d'un compteur. Le var pour les variables régulières.
Casey

1
où est la documentation de cette façon de créer un élément? $("<div>", {id: "foo", class: "a"});. Je veux savoir s'il y a d'autres options pour cela
Saba Ahang

@gdoron s'il vous plaît, jetez un oeil à ma question stackoverflow.com/questions/35413044/…
Vixed

74

Personnellement, je pense qu'il est plus important que le code soit lisible et modifiable que performant. Celui que vous trouvez plus facile à regarder et ce devrait être celui que vous choisissez pour les facteurs ci-dessus. Vous pouvez l'écrire comme:

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

Et votre première méthode comme:

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

Mais en ce qui concerne la lisibilité; l'approche jQuery est ma préférée . Suivez ces astuces, notes et meilleures pratiques jQuery utiles


Merci pour ce lien vers la référence jQuery sur la création de nouveaux éléments HTML . Tellement difficile de google pour ça.
Bob Stein


25

De manière beaucoup plus expressive,

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

Référence: Docs


4
classdoit être entre guillemets, selon les documents (via le lien Documents ci-dessus): "Le nom" classe "doit être cité dans l'objet car il s'agit d'un mot réservé JavaScript, et" className "ne peut pas être utilisé car il fait référence à la propriété DOM , pas l'attribut. "
Isaac Gregson

5

Selon la documentation officielle de jQuery

Pour créer un élément HTML, $("<div/>")ou $("<div></div>")est préféré.

Ensuite , vous pouvez utiliser soit appendTo, append, before, afteret etc ,. pour insérer le nouvel élément dans le DOM.

PS: jQuery version 1.11.x


2

Selon la documentation de 3.4 , il est préférable d'utiliser des attributs avec la attr()méthode.

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

J'ai ajouté des citations. Si vous ne mettez pas classde guillemets, cela échouera en silence et peut entraîner une folie.
John Henckel

0

Je recommanderais la première option, où vous construisez réellement des éléments à l'aide de jQuery. la deuxième approche définit simplement la propriété innerHTML de l'élément sur une chaîne, qui se trouve être HTML, et est plus sujette aux erreurs et moins flexible.


1
@Ash avec la deuxième approche, vous pouvez effacer par erreur tous les autres enfants du conteneur que vous modifiez: jsfiddle.net/jbabey/RBXq5/1
jbabey

0

Si #boxest vide, rien, mais si ce n'est pas le cas, cela fait des choses très différentes. Le premier ajoutera un divcomme dernier nœud enfant de #box. Ce dernier remplace complètement le contenu de #boxpar un seul vide div, texte et tout.


Oh .. je ne veux pas utiliser append ici;)
Ashwin

0

Il est également possible de créer un élément div de la manière suivante:

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

ajouter une classe

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

peut également effectuer append()etappendChild()

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.