web-dev-qa-db-fra.com

La manière préférée de créer un nouvel élément avec jQuery

J'ai deux façons de créer un <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 manière en dehors de la réutilisation?

javascriptjqueryappendcreateelementjquery-append
217
Ashwin

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 alors 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 a-t-il une raison spécifique pour utiliser $ avec variable dans jQuery

Le fait de placer des guillemets autour du nom de la propriété "class" le rendra plus compatible avec les navigateurs moins souples.

321
gdoron

Personnellement, j'estime 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 en tant que:

// 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 ceci astuces jQuery utiles, notes et meilleures pratiques

69
Niranjan Singh

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

23
Darshan

Selon le documentation officielle de jQuery

Pour créer un élément HTML, il est préférable d'utiliser $("<div/>") ou $("<div></div>").

Ensuite, vous pouvez utiliser appendTo, append, before, after et etc ,. insérer le nouvel élément dans le DOM.

PS: jQuery version 1.11.x

5
Alan Dong

J'ai une nouvelle idée en utilisant .html(content)

Vous pouvez placer un <div></div> vide précédemment à l'endroit souhaité, sans oublier de définir un ID pour cette DIV.

Après cela, utilisez $("#divId").html(content) pour remplacer le DIV vide par votre nouveau contenu, qui est le DIV que vous souhaitez ajouter.

2
Tianming Li

Je recommanderais la première option, où vous construisez réellement des éléments en utilisant jQuery. la seconde approche définit simplement la propriété innerHTML de l'élément sur une chaîne, qui est HTML, et qui est plus sujet aux erreurs et moins flexible.

0
jbabey

Si #box est vide, rien, mais si ce n'est pas ceux-ci font des choses très différentes. Le premier ajoutera un div en tant que dernier noeud enfant de #box. Ce dernier remplace complètement le contenu de #box par un seul div vide, texte et tout.

0
Explosion Pills

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

0
nabila_ahmed