Générer du HTML via JavaScript

Dans cette page je vous montrerai 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.

Je vais aussi présenter une innovation interessante de la dernière version de JS : les 'template strings'.

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.

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>"); 
}
...

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 délicat à écrire.

Le rendu

Le titre général de la page ainsi que le bouton de commande disparaissent car écrasés par le premier "document.write()".

Deuxième solution

Principe : bâtir dans une variable un chaine tout le code HTML à générer.
Puis la partie BODY de la page récupère ce contenu en guise de DOM via la propriété innerHTML. Donc on n'utilise plus de 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 ) {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 nouveau DOM est construit dans la variable tableau.
Pour concaténer balises, littéraux et variables la syntaxe dévient délicate ...
Notez bien la dernière instruction du script : document.body.innerHTML = tableau qui réécrit le DOM.

Le rendu

Problème : le bouton de commande disparait mais c'est logique puisque le script réécrit toute la partie BODY de la page donc écrase l'élément initial.

Troisième solution : utiliser les 'template strings'

La version 6 de EMACScript propose les "template literals" OU "template strings". Traduisez en français "littéraux de gabarits".

Grâce à cet outil on evité les fastidieuses concaténations ; on intègre les variables dans la chaine. Avec concaténation : "<tr><td>" + entier + "</td><td>fois " + i + "</td><td>donne " + produit + "</td></tr>" Avec des littéraux de gabarit : `<tr><td> ${entier} </td><td>fois ${i} </td><td>donne ${produit} </td></tr> `

Admettez que c'est beaucoup plus simple.

délimiter la chaine (qui peut être multilignes) par des accents graves (altgr +7)
intégrer dans la chaine une variable avec la syntaxe ${variable}

Attention les accents graves ne sont pas très visibles. Ne confondez pas avec apostrophe !

Le code avec littéraux de gabarit

...
<body>
<button onclick ="fgenerer()">Générer une table de multiplication</button>
<div id ='affichage'></div>
<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.getElementById('affichage').innerHTML = tableau; 
}
</script>
...

Dans la partie BODY deux éléments initiaux : le bouton de commande et un DIV identifié "affichage" qui est vide.

Le script écrit le DOM pour la boite DIV donc le bouton de commande n'est plus écrasé.

Le rendu

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

Remarque concernant les littéraux de gabarit

Avec la syntaxe ${...} vous pouvez intégrer dans le code HTML non seulement des variables mais aussi des expressions complexes, appeler des fonctions.
Utilisez la console JS pour tester les commmandes suivantes :

Let prix = 10
const TVA =.2
`Total: ${(prix * (1 + TVA)).toFixed(2)}`
'Total: 12.00'

Calcul de montant TTC à partir du prix HT et du taux de TVA.
Notez qu'à l'intérieur de ${} j'ai indiqué une expression complexe. J'aurai pu aussi appeler une fonction.

Génération d'images dans une page

Nous voulons qu'un script rajoute des images dans une boite DIV.

Les méthodes createElement() et appendChild()

Pour ajouter des éléments au DOM rappelons aussi les techniques : 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 chaque image nouvelle il faut donner des valeurs aux attributs SRC, top & left.
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.

arrêter la routine qui appelle régulièrement la fonction "ajout"
suppression du bouton de commande

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 de nouveaux éléments de type IMG.

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
Attribuer deux propriétés de style au nouvel élément (top & left)
Insérer cette nouvelle image avec la méthode appendChild

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

Le rendu dans un nouvel onglet

Pensez à afficher la console pour observer le code HTML généré par le script.
Cliquez ici

Rappel sur 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 traditionnelle pour faire en JS un traitement asynchrone (asynchrone : les instructions ne sont plus exécutées en fonction de leur ordre physique dans le programme).

Traduction

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

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Générer du HTML via JavaScript

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

Troisième solution : utiliser les 'template strings'

Le code avec littéraux de gabarit

Le rendu

Remarque concernant les littéraux de gabarit

Génération d'images dans une page

Les méthodes createElement() et appendChild()

Le code CSS & HTML correspondant

Le script

Le rendu dans un nouvel onglet

Rappel sur SetTimeout() & setInterval()