Accueil

Traduction

Tutoriel sur JS natif & Vue.js & jQuery.js & Node.js

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Générer du HTML via JavaScript - templates

Dans cette page je vais vous montrer comment créer de nouveaux éléments HTML via un script JS donc enrichir le DOM de la page.
Gros avantage par rapport à la génération de HTML via PHP : pas de requête HTPP qui ralentit l'affichage.

Générer du HTML avec "document.write"

La solution traditionnelle pour générer du code HTML via un script est d'utiliser la méthode write de l'objet document. Mais vous allez vite comprendre que cette solution est obsolète. Donc qu'il ne faut plus l'utiliser.

Exemple

Générer un tableau HTML de N lignes contenant des littéraux (valeurs fixes).

Le script correspondant ;

Le code est relativement simple car on ne manipule que de littéraux (valeurs fixes) tels "col 1", "col 2", etc.

Le rendu

Notez que le bouton de commande a disparu ainsi que le titre H3 ...
C'est la faute à la méthode document.write qui supprime tout le code HTML existant lorsqu'elle est utilisée une première fois.

Afficher une table de multiplication


C'est le visiteur qui précise laquelle des tables il veut afficher (table par 1 ou par 2 ... ou par 9).

Solution traditionnelle

Comme dans l'exemple précédent je vais utiliser des instructions basées sur "document.write".

Le code

Remarque : la partie BODY ne comprend initialement qu'un seul élément : le bouton de commande.

Script : cette fois il faut manipuler des littéraux ("fois", "donne") mais aussi des variables (i, entier, produit).
Comme il faut concaténer des balises avec des littéraux et des variables, le script devient complexe.

Le rendu


Le titre général de la page ne disparait plus puisqu'il est bâti à partir de la première instruction "document.write".

Deuxième solution

Principe : bâtir dans une variable une chaine multilignes intégrant littéraux, balises et variables.
Puis la partie BODY de la page récupère ce contenu en guise de DOM.

Le code

Au départ le seul élément de BODY est le bouton de commande.
Le DOM est construit dans la variable tableau.
Je rappelle que la syntaxe "tableau+= expression" équivaut à "tableau = tableau + expression".
les littéraux (valeurs fixes) et les balises HTML doivent être délimités par des guillemets ; les variables sans guillemets.
Il faut donc utiliser beaucoup l'opérateur de concaténation : +.

Le rendu

Cette solution est beaucoup plus satisfaisante. Le code est plus succinct.

Remarque

Vous pouvez observer le code HTML généré par le script.
Il suffit d'afficher la console du navigateur et plus précisément l'onglet "éléments".

Troisième solution

La version 6 de EMACScript propose les "template literals" OU "template strings". Traduisez en français "littéraux de gabarits".
On peut dire aussi "modèle de gabarit" ou plus simplement "template".
L'utilisation de "templates" facilite la conception et la maintenance d'une page web comme vous allez le constater dans l'exmple ci-dessous.

Le code

Comme dans la version précédente, le DOM est construit via la variable tableau
Mais les chaines sont délimitées par des accents graves (caractère quasi invisibles).
Au sein de ces chaines ont peut référencer des variables à condition de les "emballer" dans ${}.
Il s'agit donc d'un nouvelle façon de concaténer littéraux, balises et variables ; l'emploi de l'opérateur + devient marginal.

Le rendu

Admirez comme le code est concis.

Les frameworks JS de nouvelle génération tels Vue.js, utilisent systématiquement les "templates" .

Solution définitive

Vous avez pu observer qu'à chaque fois le bouton de commande disparait.
C'est logique car les scripts recréent la partie BODY de la page : document.body.innerHTML = tableau
Or il serait plus confortable que le bouton reste affiché afin de demander l'affichage successif de différentes tables.

La solution

Le script recrée la boite DIV identifiée "affichage" et non plus la partie BODY.

Le rendu

Le bouton de commande ne disparait plus.
Demandez successivement l'affichage de la table par 2, 3, 4 etc.

Méthodes createElement et appendChild

Pour ajouter des éléments au DOM rappelons aussi les techniques anciennes : createElement() et appendChild().

Dans l'exemple ci-dessous des images choisies de façon aléatoire sont insérées à raison d'une image par seconde afin de constituer un patchwork sexy.
Pour arrêter le processus d'insertion il suffit de cliquer sur le bouton de commande.

Le code CSS & HTML correspondant

Les nouvelles images sont "enfants" de la boite DIV identifiée "eau" ; elles seront positionnées en absolu dans cette boite en fonction de leurs valeurs pour les propriétés top & left.
Si clic sur le bouton de commmande : deux instructions JS sont exécutées dont clearInterval(routine)

Le script

Attention la largeur du conteneur des images est exprimé en %. Donc le "left" de chaque image doit être un pourcentage !

On crée avec le script un nouvel élément HTML (une image)

var routine = setInterval(ajout,1000) : l'appel régulier de la fonction ajout est appelée "routine".
Donc pour mettre fin à cet appel régulier il suffit d'exécuter la commande <clearInterval(routine)

Le rendu dans un nouvel onglet

Dans cet onglet, pensez à afficher la console pour observer le code HTML généré par le script.
Cliquez ici

SetTimeout() & setInterval()

Ne confondez pas setInterval(fonction, fréquence) avec etTimeOut(fonction, délai).
Dans le premier cas il s'agit d'un appel régulier d'un fonction alors que dans le deuxième cas il s'agit d'un appel unique différé d'un certain délai.
SetTimeOut() est la solution la plus ancienne pour faire en JS un traitement asynchrone.