Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
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.
Le plus simple pour générer du HTML avec JavaScript est d'utiliser la méthode write de l'objet document.
Le script correspondant ;
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 ...
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 :
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.
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 :
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 :
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 :
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().