What is the most efficient way to create HTML elements using jQuery?
Comme il s'agit de jQuery alors je pense que c'est mieux de l'utiliser (propre) approche (que vous utilisez)
$('<div/>', {
'id':'myDiv',
'class':'myClass',
'text':'Text Only',
}).on('click', function(){
alert(this.id); // myDiv
}).appendTo('body');
La 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');
La DÉMO.
Mais quand vous avez affaire avec beaucoup d'éléments dynamiques, vous devez éviter d'ajouter de l'événement handlers , en particulier de l'élément, au lieu de cela, vous devez utiliser un délégué du gestionnaire d'événement, 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');
}
La DÉMO.
Donc, si vous créer et ajouter des centaines d'éléments avec la même classe, c'est à dire (myClass) alors moins de mémoire consommée pour la gestion des événements, parce qu'un seul gestionnaire sera là pour faire le travail pour tous dynamiquement les éléments insérés.
Mise à jour : Depuis que nous pouvons utiliser l'approche suivante pour créer un élément dynamique de la
$('<input/>', {
'type': 'Text',
'value':'Some Text',
'size': '30'
}).appendTo("body");
Mais l' size d'attribut ne peut pas être défini à l'aide de cette approche à l'aide de jQuery-1.8.0 ou plus tard, et voici un vieux rapport de bug, regardez cet exemple à l'aide de jQuery-1.7.2 ce qui montre que size de définir l'attribut 30 à l'aide de l'exemple ci-dessus mais en utilisant la même approche, nous ne pouvons configurer size d'attribut à l'aide de jQuery-1.8.3, ici, c'est un non-travail violon. Donc, pour définir l' size d'attribut, on peut 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 comme un enfant de l'objet, mais il fonctionne en jQuery-1.8.0 and later versions vérifier cet exemple , mais il ne fonctionne pas en jQuery-1.7.2 or earlier (pas testé dans toutes les versions antérieures).
BTW, prises à partir d' jQuery rapport de bug
Il existe plusieurs solutions. La première est de ne pas l'utiliser à tous, depuis
il ne vous économiser de l'espace et améliore la clarté de la
code:
Ils conseillé d'utiliser l'approche suivante (travaux dans les précédents ainsi, testé en 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, de l'OMI. Cette mise à jour est faite après que j'ai lu/trouvé cette réponse et cette réponse montre que si vous utilisez 'Size'(capital S) au lieu de 'size' alors il sera juste , beau travail, même dans version-2.0.2
$('<input>', {
'type' : 'text',
'Size' : '50', // size won't work
'autofocus' : 'true'
}).appendTo('body');
Lire aussi à propos de prop, car il y a une différence, Attributes vs. Properties, il varie selon les versions.
