Discussion :

[Papy214]

Bonjour,

Aujourd'hui, quand je veux créer un div avec des éléments à l'intérieur, je compose une chaîne avec les éléments voulus et j'utilise jquery pour inclure le résultat dans ma page.

Mais je pourrais aussi utiliser document.createElement et faire un insert à l'endroit voulu.

A votre avis, quelle est la manière la plus pertinente et la plus efficace en terme de performance ?

Papy !

[sekaijin]

en terme de perf ça dépends complètement de la plate-forme

à la louche on peut dire que le innerHTML (c.a.d. texte) est très légèrement plus performante.

on reproche au createElement sa verbosité. il faut écrire beaucoup de javascript pour faire la même chose qu'avec un texte

il y a tout de même une différence.
le innerHTML passe par l'interprète HTML du navigateur. cet interprète traduit le source (texte) en objet du DOM
alors que createElement créé directement l'élément.

ce n'est pas en terme de perf qu'on trouve la différence mais en terme de possibilités.

en utilisant le texte on se limite obligatoirement à ce que l'interprète est capable de faire. du coup très souvent pour ajouter des comportement on va utiliser une recherche de l'élément créé pour lui ajouter des méthodes js. c'est entre autre ce que fait JQuery avec $()

le plus souvent avec l'approche texte le processus est le suivant
on crée un chaine de caractère représentant le HTML de l'élément à créer. on créé des fonctions et des variables javascript (globale ou dans le contexte). on demande à l'interprète de créer l'objet DOM. on recherche l'objet créé. on associe l'objet DOM aux variable et fonction.

peu importe la façon de faire lorsqu'on veut placer la valeur d'une variable dans un attribut de l'objet à créer on va concaténer des bouts de chaîne et la(les) variable(s).

la chaîne est sujette à interprétation cela signifie que les objets DOM créés ne sont pas obligatoirement le reflet exact de la chaîne (l'exemple typique est table tbody tr td)

avec l'approche createElement comme dit plus haut c'est verbeux beaucoup de ligne de code à taper.
par contre on place directement les valeur des variables dans les attributs
il n'est plus nécessaire de créer des variable et des fonctions (globale ou dans le contexte) et de les associer à l'objet.
on créé directement des propriété et des méthodes sur l'objet.
les propriétés et les méthodes étant portées par l'objet DOM lui même elle sont plus simple à écrire (this est mon ami)
pas de pb d'ID même sans ID ça fonctionne

enfin il y a mois de risque de fuite mémoire.

pour illustrer ça c'est simple.
je défini une fonction foo je crée un objet dom d'id test42
puis j'associe ma fonction à mon objet dom

lorsque dans la vie de mon appli je vais détruire mon objet la fonction va rester orpheline

si je ne crée pas de fonction mais une méthode dans mon objet il ne peu y avoir d'orphelin.

lorsqu'on utilise à fond le DOM et une approche purement objet les perfs sont au rendez vous il n'est quasiment plus du tout nécessaire de rechercher un élément du coup le code fait ce qu'il a à faire et ne passe pas sont temps à faire des getElementById (ou $())

attention tout n'est pas pour autant tout rose. en effet utiliser les référence et les objet ouvre la porte au référence circulaire
je créé un objet DOM et j'en garde une référence car dans un autre j'en aurais besoin. puis je créé le second qui est un descendant et lui donne la référence. et dans le premier je référence le second

j'ai donc deux objet qui se référence mutuellement.

pour finir tout comme il existe des librairie qui permettent de rechercher rapidement et manipuler des objet DOM déjà existant, il existe des librairie qui sont orienté construction dynamique.

dans les première on a une page HTML et la lib est faite pour manipulé le DOM déjà créé. dans ce cas l'insertion via un text est dans l'esprit de la lib c'est la cas de JQuery par exemple.

dans le deuxième on par d'une page vierge contenant juste le document et le JS et on construit une IHM a base de composant JS la lib sera optimisé pour manipuler les composant le HTML généré n'étant que accessoire. en clair on ne fait pas un tableau pour le transformer en grille de donnée on fait un grid et peut importe qu'il soit représenté par une table des div ou tout autre objet DOM. dans ce cas on s'intéresse plus à la création de composant que du HTML. c'est le cas de ExtJS par exemple

les lib type JQuery sont idéales pour enrichir une page html
les lib type Extjs sont idéales pour construire des IHM applicative

A+JYT

[Papy214]

Merci pour cette explication détaillée !

J'en retiens qu'il est plus "propre" d'utiliser la technique createelement mais que ça demande plus de travail.

Aujourd'hui, j'utilise principalement jquery et de rares plugins.

Je ne connaissais pas Extjs. J'ai regardé un peu ce que ça apporte et ça parait effectivement assez intéressant et je vais aller plus loin dans l'exploration de cet outil. Mais j'ai un peu de mal à comprendre la license. Pour un projet commercial, est-ce libre ou pas ?

J'ai vu qu'il existe ExtDesigner. Je vais essayer de trouver des avis sur cet outil et éventuellement le tester en fonction des retours utilisateurs.