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

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?

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.

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

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

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

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

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.

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.

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