Génération de HTLM avec Javascript

HTML est un langage de balisage et non pas un langage de programmation.

HTML ne connaît ni les variables, ni les boucles, ni les fonctions !
Heureusement rien n'interdit d'intégrer du code HTML dans un script.

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

Nombre de lignes du tableau à préciser par le visiteur.
Exemple 1

Le script correspondant

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

Commentaire

C'est magique !
Si vous avez saisi 2 le tableau comprendra 2 lignes. Si vous avez saisi 30 il comprendra 30 lignes.
Si vous avez saisi 60 il sera limité à 50 lignes ; il y a en effet un test qui limite le nombre de lignes.
Donc désormais le code HTML dépend de la valeur d'une variable JavaScript !
On pourrait complexifier le code : nombre variable de lignes mais aussi nombre variable de colonnes ...

Exemple 2 : générer une table de multiplication

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

Le script correspondant

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>"); document.write("<tr>"); document.write("<th>" + ventier + " fois</th><th>donne</th>"); document.write("</tr>"); for (i=1; i<=10; i++) { produit = ventier *i ; document.write("<tr>"); document.write("<td>" + i + "</td>"); document.write("<td>" + produit + "</td>"); document.write("</tr>"); } document.write("</table>");

Commentaire

Dans le tableau précédents les contenus des cellules étaient des éléments constants.
Ici on affiche dans certaines cellules des variables ou des expressions mixant des éléments variables et des éléments constants.
Dans ce cas les éléments constants (balise HTML et texte) doivent être entre quotes !

Limites de la méthode

Attention l'exécution d'une 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 noeuds il ne faut surtout pas utiliser cette méthode.
Démonstration ci-dessous. Pensez à cliquer sur le bouton

Le code correspondant

... <img src ="../images/bikini.jpg" /> <img src ="../images/seins_nus.jpg" /> <img src ="../images/jolie_fille.jpg" /> <img src ="../images/trikini.jpg" /> <button onclick ="document.write('<h1>Vieux vicieux !!!</h1>')">Déshabillez nous !</button> ...

Commentaire

Les 4 images sont chargées et affichées via HTML.
Un clic sur le bouton de commande exécute une instruction JS qui efface la page pour afficher un texte moralisateur.

Méthodes createElement et appendChild

Dans l'exemple ci-dessous et à chaque fois que vous cliquez sur le bouton de commande une image est insérée dans la boite de fond bleu mais toujours à un emplacement différent.

Ici il n'est pas possible d'utiliser la méthode document.write car la page est déjà chargée et on ne veut effacer la boite identifiée "eau" qui sera le conteneur des images.
Il faut donc utiliser d'autres outils ... Testez l'exemple

Le code correspondant

... <style> div {position : relative ; margin : auto;} img {position : absolute; width : 10%;} ... <body> <div id ="eau" style = "width : 96% ; height : 400px ; background : aqua ; " > </div> <button>insérer une image !</button> <br> <a href ='js_menu.htm'>Retour menu </a> </body> <script> var bouton =document.querySelector("button"); bouton.onclick = function() { var x ; var y; x =Math.floor(Math.random()*90); y =Math.floor(Math.random()*350); x =x +"%"; y=y+"px"; var parent =document.querySelector("#eau"); var image=document.createElement("img"); image.src ="../images/crevette.gif"; image.style.left =x; image.style.top = y; parent.appendChild(image); } </script> ...

Commentaire

Attention la largeur du conteneur des images est exprimé en %. Donc le "left" de chaque image doit être un % et non pas une valeur en pixels.

On crée avec le script un nouveau noeud sans pour autant effacer ceux qui existent déjà.

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

En fait le script génère l'équivalent de l'instruction HTML :
< img src ="../images/crevette.gif" style ="left : x ; top : y;" >
Retour menu