Quel est le moyen le plus efficace de créer des éléments HTML en utilisant jQuery?

Personnellement, je suggère (pour la lisibilité):

$('<div>');

Quelques chiffres sur les suggestions jusqu'à présent (safari 3.2.1 / mac os x):

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms              

Question:

Quel est le moyen le plus efficace de créer des éléments HTML en utilisant jQuery?

Réponse:

Comme il s'agit de jQuery Alors je pense qu'il est préférable d'utiliser cette approche (propre) (vous utilisez)

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

Démo.

De Cette façon, vous pouvez même utiliser des gestionnaires d'événement pour l'élément spécifique comme

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

Démo.

Mais lorsque vous avez affaire à beaucoup d'éléments dynamiques, vous devriez éviter d'ajouter event handlers dans un élément particulier, vous devez plutôt utiliser un gestionnaire d'événements délégué, comme

$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}

Démo.

Donc, si vous créez et ajoutez des centaines d'éléments avec la même classe, c'est-à-dire (myClass), moins de mémoire sera consommée pour la gestion des événements, car un seul gestionnaire sera là pour faire le travail pour tous les éléments insérés dynamiquement.

Update: puisque nous pouvons utiliser l'approche suivante pour créer un élément dynamique

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

Mais le size attribut ne peut pas être défini en utilisant cette approche en utilisant jQuery-1.8.0 ou plus tard Et voici un ancien rapport de bogue , regardez cet exemple en utilisant jQuery-1.7.2 qui montre que size attribut est défini sur 30 en utilisant l'exemple ci-dessus mais en utilisant la même approche, nous ne pouvons pas définir size attribut en utilisant jQuery-1.8.3, Voici un violon non fonctionnel. Donc, pour définir l'attribut size, nous pouvons utiliser l'approche suivante

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

Ou celui-ci

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

Nous pouvons passer attr/prop en tant qu'objet enfant mais il travaille dans jQuery-1.8.0 and later versions vérifier cet exemple mais ne fonctionne pas dans jQuery-1.7.2 or earlier (pas testé dans toutes les versions antérieures).

BTW, tiré de jQuery rapport de bogue

Il y a plusieurs solutions. Le premier est de ne pas l'utiliser du tout, puisque il ne vous économiser de l'espace et améliore la clarté de la code:

Ils conseillé d'utiliser l'approche suivante (œuvres dans les précédents ainsi, testé dans 1.6.4)

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

Donc, il est préférable d'utiliser cette approche, OMI. Cette mise à jour est faite après avoir lu / trouvé cette réponse et dans cette réponse montre que si vous utilisez 'Size'(capital S) au lieu de 'size' alors il va juste fonctionner correctement , même dans version-2.0.2

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

Lisez aussi à propos de prop , car il y a une différence, Attributes vs. Properties, elle varie selon les versions.

En fait, si vous faites $('<div>'), jQuery utilisera également document.createElement().

(Il suffit de jeter un oeil à ligne 117).

Il y a une surcharge d'appel de fonction, mais à moins que les performances ne soient critiques (vous créez des centaines [des milliers] d'éléments), il n'y a pas beaucoup de raisons de revenir à plain DOM.

Créer simplement des éléments pour une nouvelle page web est probablement un cas dans lequel vous vous en tiendrez le mieux à la façon jQuery de faire les choses.

Si vous avez beaucoup de contenu HTML (plus qu'un simple div), vous pouvez envisager de construire le HTML dans la page dans un conteneur caché, puis de le mettre à jour et de le rendre visible en cas de besoin. De cette façon, une grande partie de votre balisage peut être pré-analysée par le navigateur et éviter de s'enliser par JavaScript lorsqu'il est appelé. Espérons que cette aide!

Ce n'est pas la bonne réponse pour la question mais je voudrais partager cela...

En utilisant simplement document.createElement('div') et en sautant JQuery, vous améliorerez beaucoup les performances lorsque vous voulez créer beaucoup d'éléments à la volée et les ajouter à DOM.

Je pense que vous utilisez la meilleure méthode, bien que vous puissiez l'optimiser pour:

 $("<div/>");

Vous n'avez pas besoin de performances brutes d'une opération que vous effectuerez extrêmement rarement du point de vue de la CPU.

Vous devrez comprendre que la signification des performances de création d'éléments n'est pas pertinente dans le contexte de l'utilisation de jQuery en premier lieu.

Gardez à l'esprit qu'il n'y a pas de but réel de créer un élément à moins que vous ne l'utilisiez réellement.

Vous pouvez être tenté de tester les performances de quelque chose comme $(document.createElement('div')) vs. $('<div>') et obtenir d'excellents gains de performance en utilisant $(document.createElement('div')) mais c'est juste un élément qui n'est pas encore dans le DOM.

Cependant, à la fin de la journée, vous pourrez vous voulez utiliser l'élément de toute façon, donc le test réel devrait inclure f. ex. .appendTo ();

Voyons, si vous testez ce qui suit les uns contre les autres:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

Vous remarquerez que les résultats varient. Parfois, une façon est plus performante que l'autre. Et c'est seulement parce que la quantité de tâches d'arrière-plan sur votre ordinateur change au fil du temps.

Testez-vous ici

Donc, à la fin de la journée, vous voulez choisir le plus petit et le plus lisible de la création d'un élément. De cette façon, au moins, vos fichiers de script seront les plus petits possibles. Probablement un facteur plus important sur le point de performance que la façon de créer un élément avant de l'utiliser dans le DOM.

Quelqu'un a déjà fait un test: document jQuery.createElement équivalent?

$(document.createElement('div')) est le grand gagnant.

Un point est que cela peut être plus facile à faire:

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

Ensuite, pour faire tout cela avec des appels jquery.

J'utilise jquery.min v2. 0. 3 . C'est pour moi préférable d'utiliser ce qui suit:

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

Comme suit:

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

Temps de Traitement du premier code est beaucoup plus faible que le deuxième code.