La méthode préférée pour créer un nouvel élément avec jQuery

Question

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

Soit :

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

Ou :

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

Quels sont les inconvénients de l'utilisation de la deuxième voie autres que la réutilisabilité ?

Answer 1

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 tandis que .append('*') ne le fait pas, mais je suppose que ce n'était pas votre question.

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

En plaçant des guillemets autour de la "class" le nom de la propriété la rendra plus compatible avec les navigateurs moins souples.

Answer 2

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

$('#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 pour ce qui est de la lisibilité ; l'approche jQuery est ma préférée . Suivez cette Astuces, notes et meilleures pratiques concernant jQuery

Answer 3

C'est beaucoup plus expressif,

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

Référence : Docs

Answer 4

Si #box est vide, rien, mais s'il ne l'est pas, ils font des choses très différentes. La première ajoutera un div comme le dernier nœud enfant de #box . Ce dernier remplace complètement le contenu de #box avec un seul vide div le texte et tout.

Answer 5

Je recommande la première option, qui consiste à construire des éléments à l'aide de jQuery. La seconde approche consiste simplement à définir la propriété innerHTML de l'élément sur une chaîne, qui se trouve être du HTML, et elle est plus sujette aux erreurs et moins flexible.