L'essentiel de JavaScript

Créer de nouveaux éléments

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Faites le tour de plusieurs techniques vous permettant de créer de nouveaux éléments et de les attacher au DOM.

Transcription

Nous allons maintenant créer de nouveaux éléments dans le DOM, je vais vous montrer deux méthodes. La première est très simple mais pas très propre et un petit peu brutale, et puis la seconde qui est un petit peu plus complexe, un peu plus longue, mais qui est la façon exacte et propre de réaliser cette opération. Je suis toujours sur la même page web, le code HTML de cette page web est toujours assez simple, c'est quelque chose qui ne devrait pas vous poser problème. Remarquez, en fin de code, que je charge ici le fichier «script.js », ouvert ici, qui possède déjà pas mal de code mais tout ce code est commenté donc n'intervient, pour le moment, pas, dans le rendu de cette page par le navigateur. Alors, dans le code HTML, je vais également vous montrer ce « div », entre les lignes 46 et 48, qui est le « div trivia », il porte l'identifiant « trivia», et vous voyez que ce « div » est complètement vide pour le moment. Donc sur la page, dans le navigateur, ce « div » est, en fait, ici, un rectangle vide, qui n'a pas de contenu, eh bien, je vais maintenant, grâce au JavaScript, créer des événements et remplir ce « div » vide de contenu. Alors, pour cela, je vais retourner dans mon JavaScript et je vais dé-commenter les lignes deux et trois du code, ces deux lignes de codes créent deux variables, la variable « newHeading », la variable « newParagraph ». Et, j'utilise, pour créer ces deux variables, la méthode « createElement » de l'objet « document », qui me permet de créer de nouveaux éléments dans le DOM et je passe à cette méthode « createElement » la balise HTML que je veux utiliser pour créer ces éléments. Donc, là, je crée un élément de type H1 : titre de niveau 1, et puis je crée un paragraphe. Ces deux éléments existent maintenant dans la mémoire de l'ordinateur, ils font partie du DOM, mais ils ne sont encore raccrochés à rien. C'est-à-dire qu'ils n'ont pas de parents, donc, pour le moment, le navigateur ne sait pas quoi faire de ces éléments, ne sait pas où les afficher dans la page. Alors, je vais maintenant donner du contenu à ces deux éléments. Pour cela, je vais dé-commenter la ligne 6 et voyez que j'utilise la propriété « innerHTML » de mon élément « newHeading » que je crée en ligne 2, et j'envoie, dans cette propriété une chaîne de caractères, donc je définis le contenu, ici, de ce titre et je mets « Le saviez-vous ? » dans le titre. Je vais faire la même chose en ligne 7 avec mon nouveau paragraphe que je crée en ligne 3, je vais définir sa propriété « innerHTML » et je vais la rendre égale à cette chaîne de caractères, « La Californie produit plus de 17 millions de gallons de vin chaque année. » Alors, maintenant, mes deux éléments existent dans le DOM, ont du contenu mais ils ne sont toujours accrochés à rien, ils sont dans le vide. Et, pour les accrocher à quelque chose, je vais dé-commenter les lignes 17 et 18 de mon code, ici, je vais aller chercher, grâce à « getElementById », l'élément « trivia », qui est l'élément vide que je veux remplir et je vais utiliser la méthode « appendChild » pour ajouter un enfant, cela veut dire « ajouter un enfant », en anglais, et je vais ajouter l'enfant « newHeading », c'est-à-dire l'élément H1 que je crée en ligne 3, avec son contenu que je crée en ligne 6, à l'élément « trivia ». Et puis, je vais faire la même chose avec mon nouveau paragraphe, donc je vais ajouter l'enfant nouveau paragraphe à mon élément « trivia », nouveau paragraphe que je crée en ligne 3 et que je remplis de contenu en ligne 7. Je sauvegarde ce fichier JavaScript, je reviens dans mon navigateur et je vais rafraîchir ma page, vous voyez ici que le « div trivia » n'est plus vide, il est rempli de contenu. Si je fais un clic droit et que j'inspecte ceci, dans la console, eh bien vous constatez qu'il y a un élément H1 avec le contenu « Le saviez-vous ? » et puis un élément P, un paragraphe avec « La Californie produit plus de 17 millions de gallons de vin chaque année », le tout à l'intérieur de ce « div trivia » qui était vide au départ. Alors, utiliser « innerHTML » pour remplir ses éléments de contenu, vous voyez que cela fonctionne mais c'est une méthode un peu brutale, un peu quelconque pour faire ceci, je vais vous montrer maintenant une deuxième méthode un petit peu plus propre. Alors, elle consiste en la création de deux variables supplémentaires, une que j'ai appelée « H1Text » et l'autre « paraText », et je rends ces variables égales à la méthode « createTextNode », de l'objet « document », alors là, je crée aussi un élément dans le DOM, un nœud de type texte, alors rappelez-vous, tout à l'heure, on avait vu cette propriété « nodeType », qui était égale à 1 ou à 3, eh bien, avec « createElement », ici, je crée un élément de type 1, c'est-à-dire un noeud de type « élément ». Et, avec « createTextNode », eh bien je crée un élément de type 3, c'est-à-dire un nœud de type texte. Et, je remplis ce nœud de contenu, en passant le contenu de ce « nœud texte » dans les parenthèses, même chose pour le deuxième nœud texte, ici, et maintenant, je vais ajouter ces deux nœuds textes aux deux éléments que j'ai créés en ligne 2 et 3, pour cela, je vais utiliser la méthode « appendChild », donc j'accroche le « H1Text », c'est-à-dire le texte « Le Saviez-vous ? », à l'élément « newHeading » qui est mon élément H1 que je crée en ligne 2, et puis j'accroche la variable « paraText » qui est un « textNode», ici à mon élément « newParagraph » que je crée en ligne 3, la fin du code ne change pas, j'accroche ces deux éléments à mon élément « trivia », grâce à « appendChild » également, et, quand je reviens dans le navigateur, rien n'a changé, voyez que j'ai toujours ce « div » qui est rempli, maintenant, de contenu, d'un titre de niveau 1 et d'un paragraphe, et j'ai utilisé une méthode, qui, bien qu'un peu plus longue et plus complexe, est un petit peu plus respectueuse des éléments du DOM, puisque je crée tous ces « text nodes » et tous ces éléments et que je les accroche ensemble de manière tout à fait explicite, c'est donc, un petit peu plus propre que l'« innerHTML ».

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !