Création d'éléments DOM avec jQuery

Dans votre désir d'améliorer votre code JavaScript, vous êtes curieux de tirer parti des fonctionnalités de jQuery pour simplifier la manipulation du DOM .

jQuery propose d'autres moyens de créer des éléments DOM, comme vous l'avez remarqué avec $.create("div"). Cependant, cette approche ne fait pas partie de l'API principale de jQuery et peut ne pas être toujours fiable.

Pour une solution plus efficace et standardisée, considérez ce qui suit :

this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

Ce code concis accomplit la même chose que votre JavaScript d'origine en :

• Création d'un élément
  à l'aide de $('

  ).
• Le masquer avec .hide().
• Ajouter un élément avec $.append(), définir ses propriétés et ajouter un class.

  Résultats du benchmarking

  Concernant les performances des différentes méthodes de création d'éléments, un benchmark a révélé que document.createElement est le plus rapide. Cependant, les différences de temps entre les méthodes sont minimes dans les versions modernes de jQuery (par exemple, 3 millisecondes pour mille éléments).

  Mise à jour pour jQuery 1.7.2

  Le le benchmark a été mis à jour avec jQuery 1.7.2 et est disponible sur http://jsben.ch/#/ARUtz pour une exploration plus approfondie et des résultats participatifs.