Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
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.
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.
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.
Comme dans l'exemple précédent je vais utiliser des instructions basées sur "document.write".
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 : +.
Cette solution est beaucoup plus satisfaisante. Le code est plus succinct.
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".
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.
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.
Admirez comme le code est concis.
Les frameworks JS de nouvelle génération tels Vue.js, utilisent systématiquement les "templates" .
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.