Générer du HTML ou du SVG via JavaScript

Dans cette page je vais vous montrer comment générer des éléments HTML via JavaScript.
Je vais aussi évoquer deux méthodes qui permettent d'appeler de façon régulière ou différé une fonction.
Je vais aussi vous montrer que l'on peut créer des fonctions récursives en JavaScript.

Générer du HTML

HTML est un langage de balisage et non pas un langage de programmation.
HTML ne connait ni les variables, ni les boucles, ni les fonctions ! Heureusement rien n'interdit d'intégrer du code HTML dans un script.
Cependant il est préférable d'utiliser PHP pour générer du HTML car - comme vous savez - JavaScript peut être désactivé par le navigateur.

Méthode WRITE

Le plus simple pour générer du HTML avec JavaScript est d'utiliser la méthode write de l'objet document.

Exemple 1 : générer un tableau HTML

Le script correspondant ; 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>"); 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>");

La fonction est appelée par un bouton de commande.

Le rendu dans un 'iframe':

Oui, je suis d'accord avec vous, il est pas très joli ce tableau.
Mais l'important n'est pas là. Ce que vous devez retenir c'est que du code HTML a été généré via un script.
Notez aussi que le bouton de commande qui appelle la fonction JS "fgenerer" a disparu ...

Exemple 2 : générer 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)

Le script correspondant : function fgenerer() { var ventier = prompt("tapez un entier compris entre 1 et 9") ; if (ventier > 9 ) {ventier =9 ; alert("saisie plafonnée à 9"); } document.write("<h3>La table de multiplication par : " + ventier +"</h3>"); document.write("<table>"); for (i=1; i<=10; i++) { produit = ventier *i ; document.write("<tr>"); document.write("<td>" + ventier + "</td>"); document.write("<td>" +" fois " + i + "</td>"); document.write("<td>" + " donne " + produit + "</td>"); document.write("</tr>"); } document.write("</table>"); }

La fonction est appelée par un bouton de commande.

Le rendu dans un 'iframe':

Le bouton de commande disparait sans qu'on lui demande ...
C'est la faute de la méthode write de document qui supprime tout le code HTML existant lorsqu'elle est utilisée sur un document chargé.

Avec les outils de développement du navigateur (Chrome ou Firefox), on peut observer le code HTML généré par le script. Pour observer le code HTML généré il suffit d'afficher l'onglet "éléments" de la console JS.

Limites de la méthode

Attention, l'exécution de la première instruction document.write provoque l'effacement de la page !!!

Donc si vous voulez rajouter des éléments HTML à une page chargée et sans pour autant effacer les anciens éléments HTML il ne faut surtout pas utiliser cette méthode !

Le rendu dans un 'iframe' de ce qu'il ne faut pas faire :

Le code correspondant : ... <img src ="../images/bikini.jpg" /> <img src ="../images/bikini2.jpg" /> <img src ="../images/bikini3.jpg" /> <img src ="../images/trikini.jpg" /> <button onclick ="document.write('<b>Vieux vicieux !!!</b>')">Déshabillez nous !</button> ...

Les quatre images sont chargées et affichées via HTML.
Un clic sur le bouton de commande exécute une instruction document.write qui efface tous les éléments qui étaient affichés et en particulier les quatre images.
Conclusion : il n'est plus possible d'utiliser document.write une fois que la page est chargée !

La solution ci-dessous : ... <button onclick ="this.textContent ='Vieux vicieux !!!';">Déshabillez nous !</button>

Dès qu'on clique sur le bouton de commande sa légende change ... et les images restent affichées puisqu'on n'utilise plus "document.write".
Le rendu dans un 'iframe' du code correct :

Méthodes createElement et appendChild

Les méthodes createElement() et appendChild() ont déjà été évoquées dans le chapitre "Manipuler le DOM avec JS".

Pour créer de nouveaux éléments HTML dans une page la solution orthodoxe est d'utiliser deux ces deux méthodes.

Dans l'exemple ci-dessous 36 images choisies de façon aléatoire sont insérées et positionnées de façon tout aussi aléatoire dans une boite de fond "aqua".

Ce script porte non seulement sur les méthodes précitées mais aussi sur la récursivité et sur l'emploi de la méthode setTimeout().

Le code CSS & HTML correspondant

...
<style>
	div {position : relative ; margin : auto;}
	img {position : absolute; width : 10%;}
...
<body>
	<div  id ="eau" style = "width : 100% ; height : 500px ; background : aqua ; " >	</div>
...

Les nouvelles images sont "enfants" de la boite DIV identifiée "eau" ; elles seront positionnées en absolu par rapport à cette boite en fonction de leurs valeurs pour les propriétés top & left.

Le script correspondant

var i =1; 
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 24 : image.src ="../images/bikini27.jpg" ; break;
			case 25 : image.src ="../images/bikini28.jpg" ; break;
		} // fin switch 
	image.style.left =x; 
	image.style.top = y;
	parent.appendChild(image); // ajout d'un enfant à parent
	i++; 
	if(i<=36) setTimeout(ajout,500); // fonction appelée 2 fois par seconde
} // fin fonction
ajout(); // premier appel de la fonction

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

On crée avec le script un nouvel élément HTML (une image) sans pour autant effacer ceux qui existent déjà (ce que ferait l'instruction document.write argumentée avec "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 (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"

Notez la récursivité : la fonction ajout() s'appelle elle-même toutes les 500 milli-secondes.

Surtout respectez la casse pour les méthodes : un E à createElement et un C à appendChild.

Le rendu dans un 'iframe' de cette page :

Actualisez la page pour relancer le script !

SetTimeout() & setInterval()

Dans le script précédent nous avons utilisé la méthode setTimeout() qui exécute une fonction une fois au bout d'un certain intervalle de temps. Aussi nous avons dû créer une fonction récurvise.

On a fait compliqué alors que l'on peut faire plus simple.
Sachez qu'il existe en effet, la méthode setInterval() qui permet d'exécuter une fonction plusieurs fois et à intervalles réguliers. Il faut alors utiliser la méthode clearInterval() pour mettre fin à cet appel régulier.

Reprenons la thématique précédente et proposons un script alternatif.

Le code HTML

<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>

J'ai rajouté un bouton de commande.
Sur clic deux instructions JS sont exécutées : fin de l'appel régulier d'une fonction identifié "routine" et suppression du bouton.

Le script

Je vous communique que des extraits puisque les modifications par rapport à la version précédente sont marginales. ... parent.appendChild(image); } // fin fonction ajout var routine = setInterval(ajout,500);

Dans la fonction ajout() l'appel récursif de cette fonction a disparu. le compteur i est inutile. Donc les deux dernières instructions ont disparu.
Pour pouvoir utiliser cleaInterval() il faut identifier l'appel régulier d'une fonction par une variable qui est reprise comme argument de clearInterval().

Le rendu de cette nouvelle version :

Le bouton de commmande disparait après qu'on l'ai cliqué.
Actualisez la page pour relancer le processus.

Générer du code au format SVG via JavaScript

Vous savez que SVG est un format d'image vectorielle. Il s'agit d'un langage XML donc d'un langage de balisage comme le HTML.
On ne peut pas générer du SVG dans une page avec JavaScript de base mais il existe des frameworks SVG !
La plus célèbre de ces librairies JavaScript est Snap SVG. Snap SVG est une bibliothèque JavaScript open source d’Adobe.
Cette librairie a été écrite par Dmitry Baranovskiy qui avait écrit auparavant Raphael.
Si vous êtes intéressé par Snap SVG , sachez qu'il y a dans mon site quelques chapitres sur ce framework : Initiation à Snap SVG

Traduction

Tutoriel JavaScript & jQuery - sommaire

JavaScript natif

JavaScript-jQuery

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Générer du HTML ou du SVG via JavaScript