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?

— Ashwin
source

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

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.

— gdoron soutient Monica
source

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

— Niranjan Singh
source

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

Mieux vaut le faire comme: stackoverflow.com/a/43719563/383904

— Roko C. Buljan

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

— Darshan
source

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

— Alan Dong
source

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

— Anuradha Mudalige
source

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.

— jbabey
source

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.

— Pilules d'explosion
source

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

— nabila_ahmed
source