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 ; ... <button onclick ="fgenerer()">Générer un tableau HTML !</button> <h3>Génération d'un tableau de N lignes remplis de littéraux</h3> <script> function fgenerer() { var nbre_lignes = prompt("saisir le nombre de lignes du tableau") ; if (nbre_lignes >50 ) {ventier =50 ; alert("nombre de lignes limitée à 50"); } document.write("<table style ='width : 50%; margin : auto ; border : 1px solid black' >"); for (i=0;i<=nbre_lignes; i++) { document.write("<tr>"); document.write("<td>col 1 </td>"); document.write("<td>col 2 </td>"); document.write("<td>col 3 </td>"); document.write("</tr>"); } document.write("</table>"); } </script> ...

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

...
<body>
<button onclick ="fgenerer()">Générer une table de multiplication</button>
<script>
function fgenerer()
{
	var entier = prompt("tapez un entier compris entre 1 et 9") ;
	if (entier > 9 ) {ventier =9 ; alert("saisie plafonnée à 9"); }
	document.write("<h3>La table de multiplication par : " + entier +"</h3>"); 
	document.write("<table style ='width : 50%; margin : auto ; border : 1px solid black'>");
	for (i=1; i<=10; i++)
	{
		produit = entier *i ; 
		document.write("<tr>"); 
		document.write("<td>" + entier + "</td>");
		document.write("<td>" +" fois " + i + "</td>");
		document.write("<td>" + " donne " +  produit + "</td>");
		document.write("</tr>"); 
	}
	document.write("</table>"); 
}
...

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

...
<body>
<button onclick ="fgenerer()">Générer une table de multiplication</button>
<script>
function fgenerer()
{
	var entier = prompt("tapez un entier compris entre 1 et 9") ;
	if (entier >9 ) {entier =9 ; alert("saisie plafonnée à 9"); }
	var tableau = "<h3>La table de multiplication par" +  entier + "</h3>" ; 
	tableau+= "<table>"; 
	for (i=1; i<=10; i++)
	{
		produit = entier * i ; 
		tableau += "<tr><td>" + entier + "</td><td>fois "  + i + "</td><td>donne " + produit + "</td></tr>" ; 
		
	}
	tableau+= "</table>"; 
	document.body.innerHTML = tableau ; 
}
</script>
</body>
...

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.

délimiter la chaine, en général multilignes, par des accents graves (altgr + `7)
intégrer le code JavaScript à l’intérieur d’un bloc avec la syntaxe ${code JS}

Le code

...
<body>
<button onclick ="fgenerer()">Générer une table de multiplication</button>
<script>
function fgenerer()
{
	var entier = prompt("tapez un entier compris entre 1 et 9") ;
	if (entier > 9 ) {entier =9 ; alert("saisie plafonnée à 9"); }
	var tableau = `<h3>La table de multiplication par  ${entier}</h3><table> `; 
	for (i=1; i<=10; i++)
	{
		produit = entier *i ; 
		tableau += `<tr><td> ${entier} </td><td>fois  ${i}  </td><td>donne  ${produit} </td></tr> `; 
																				   
	}
	tableau+= `</table> `; 
	document.body.innerHTML = tableau ; 
}
</script>
</body>
...

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

...
<body>
<button onclick ="fgenerer()">Générer une table de multiplication</button>
<div id ='affichage'></div>
<script>
...
tableau+= `</table> `; 
document.getElementById('affichage').innerHTML = tableau; 
} // fin fonction
...

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

...
<style>
	div {position : relative ; margin : auto;}
	img {position : absolute; width : 10%;}
</style></head>
<body>
	<div  id ="eau" style = "width : 100% ; height : 500px ; background : aqua ; ">	</div>
	<button onclick ="clearInterval(routine);this.remove();" >Mettre fin à la routine de génération d'images</button>
...

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

function ajout()
{
	var x ; var y; 
	x =Math.floor(Math.random()*90);
	y =Math.floor(Math.random()*300);
	x =x +"%"; 
	y=y+"px";
	var parent =document.querySelector("#eau");
	var image=document.createElement("img");
	var reel = Math.random() ;
	var entier = Math.ceil(reel*25) ; 
	switch(entier)
		{
			case 1 : image.src ="../images/japonaise_nue.jpg" ; break;
			case 2 : image.src ="../images/black_nue.jpg" ; break;
			case 3 : image.src ="../images/seins_nus.jpg" ; break;
			...
			case 25 : image.src ="../images/bikini28.jpg" ; break;
		} // fin switch 
	image.style.left =x; 
	image.style.top = y;
	parent.appendChild(image);
} // fin fonction ajout

var routine = setInterval(ajout,1000);

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)

ajout()

générer de façon aléatoire un entier x inférieur à 90% et un entier y inférieur à 300px.
créer un nouvel élément de type img avec la méthode createElement
Attribuer à cet élément l'attribut SRC (génération d'un entier compris entre 1 et 14 puis choix d'un chemin parmi 14)
Affecter deux propriétés de style au nouvel élément (top & left)
Insérer ce nouveau noeud à un endroit précis avec la méthode appendChild ; ici dans la boite DIV identifiée "eau"

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.

Traduction

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

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Générer du HTML via JavaScript - templates

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

Exemple

Le rendu

Afficher une table de multiplication

Solution traditionnelle

Le code

Le rendu

Deuxième solution

Le code

Le rendu

Remarque

Troisième solution

Le code

Le rendu

Solution définitive

La solution

Le rendu

Méthodes createElement et appendChild

Le code CSS & HTML correspondant

Le script

Le rendu dans un nouvel onglet

SetTimeout() & setInterval()