Création Dynamique de Pages HTML avec JavaScript

Utiliser l'AJAX
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre JavaScript ES6 - Les fondamentaux
Revoir le teaser Je m'abonne
3,8
Transcription

69,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
3,8
69,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Comprendre comment créer dynamiquement des éléments HTML avec JavaScript.
Apprendre à récupérer et utiliser des données JSON pour peupler une page web.
Se familiariser avec la manipulation du DOM en JavaScript.

Cette leçon vous montre comment créer dynamiquement une page HTML en utilisant JavaScript pour manipuler le DOM.

Dans cette leçon, nous apprenons à créer dynamiquement une page HTML en utilisant JavaScript pour manipuler le DOM. Nous allons récupérer des données depuis un serveur sous forme de JSON, et les utiliser pour produire des éléments HTML structurés comprenant des titres et des paragraphes.

Premièrement, nous créons une div avec un ID dans notre fichier HTML principal. Ensuite, nous utilisons querySelector pour récupérer cette div en JavaScript. Nous procédons à la récupération des données depuis le serveur en utilisant fetch et convertissons la réponse en JSON.

Pour chaque élément du tableau JSON, nous créons des éléments HTML (div, h2, p) et les peuplons avec les données. Nous utilisons des template strings pour faciliter l'insertion de contenu dynamique. Chaque élément créé est ajouté au DOM de manière structurée, définissant les relations parent-enfant entre les éléments.

Enfin, nous affinons le style pour assurer une bonne lisibilité du contenu généré. Cette méthode offre une grande flexibilité pour créer des pages dynamiques et interactives basées sur des données récupérées en temps réel.

Voir plus
Questions réponses
Comment récupérer une div par son ID avec JavaScript ?
Vous pouvez utiliser la méthode document.querySelector('#id') pour récupérer une div par son ID.
Pourquoi utilise-t-on <code>createElement</code> en JavaScript ?
createElement est utilisé pour créer un nouvel élément HTML dynamiquement, permettant ainsi de peupler le DOM de manière interactive.
Qu'est-ce qu'une template string en JavaScript ?
Une template string permet d'insérer des expressions dans une chaîne de caractères en utilisant la syntaxe ${expression}, facilitant ainsi la création de contenu dynamique.

Programme détaillé

11 commentaires
3,8
11 votes
5
4
3
2
1
64AFB36E-9B8E-4AFD-8AB2-31D21BD2624B@cyberlibris.studi.fr
Il y a 2 weeks
Commentaire
Merci pour cette formation précieuse
AC109CDD-E1D2-49BD-AEF1-E6FCCA5D1575@cyberlibris.studi.fr
Il y a 4 weeks
Commentaire
GOOD
F8DE8C0C-C73E-442F-A9CF-626F14B0C62A@cyberlibris.studi.fr
Il y a 1 month
Commentaire
Très bonne formation .
C0C23DAC-E0F0-4671-A5DA-98CC3C3F0FD7@cyberlibris.studi.fr
Il y a 4 months
Commentaire
RAS
elephorm-1344761@addviseo.com
Il y a 7 months
Commentaire
Le cours sont pas assez adaptés pour une personne qui débute un peu les langages informatiques
85F76F55-E9A7-4111-B6B2-79CB51A205B9@cyberlibris.studi.fr
Il y a 11 months
Commentaire
EXCELLENT
93DAC8BB-E168-4366-B5BE-6F3D0B39B74D@cyberlibris.studi.fr
Il y a 1 year
Commentaire
super
wastiaux.william
Il y a 3 years
Commentaire
Un peu léger, le cour survole toutes les notions de bases. L'idéal est de visionner les cours en x2.
Si vous êtes novices, vous pourrez rentrer rapidement dans le monde du js.
michaellaunay
Il y a 3 years
Commentaire
Bonne formation pour qui sait déjà programmer dans un autre langage. Une formation sur Javascript avancé serait fort appréciée ;-)
olivierousmail
Il y a 3 years
Commentaire
Formation inadaptée pour un débutant, donne des concepts sans les expliquer, qu'est ce qu'un tableau ? qu'est ce qu'une fonction ? focalise tout le premier module sur l'utilisation de constantes alors qu'on est loin de les utiliser régulièrement.

Formation faite pour revenir dessus après avoir suivi une "réelle" formation sur les bases de Javascript.
lepajollecfranck
Il y a 3 years
Commentaire
Très bons contenus et bonnes explications. Manque d'un second module pour aller plus loin dans l'exemple.