Exercices : Génération du HTML en JavaScript
Exercice 0 : préparation du repository
Créez un repository public avec un README sur GitHub, appelez-le bre05-js-j5
Clonez-le dans le dossier sites/js de votre IDE.
Exercice 1 : ajouter à la fin
Dans le dossier bre05-js-j5, créez un dossier exercice-1. Dans le dossier exercice-1 créez un fichier index.html et un fichier index.js.
Le contenu du fichier index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" >
<title>
Exercice 1 : ajouter à la fin
</title>
</head>
<body>
<p>Ingrédients : </p>
<ul>
<li>Farine</li>
<li>Lait</li>
<li>Oeufs</li>
</ul>
</body>
<script type="application/javascript" src="index.js"></script>
</html>
Votre JavaScript va devoir ajouter l'ingrédient Beurre à la fin de la liste.
Exercice 2 : ajouter au début
Dans le dossier bre05-js-j5, créez un dossier exercice-2. Dans le dossier exercice-2 créez un fichier index.html et un fichier index.js.
Le contenu du fichier index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" >
<title>
Exercice 2 : ajouter au début
</title>
</head>
<body>
<p>Ingrédients : </p>
<ul>
<li>Farine</li>
<li>Chocolat</li>
<li>Oeufs</li>
<li>Sucre</li>
<li>Beurre</li>
</ul>
<p>Préparation :</p>
<ol>
<li>Faire fondre le chocolat</li>
<li>Mélanger tous les ingrédients</li>
<li>Mettre au four</li>
</ol>
</body>
<script type="application/javascript" src="index.js"></script>
</html>
Votre JavaScript va devoir ajouter une <li> qui contient le texte Préchauffer le four au début de la <ol>.
Exercice 3 : ajouter un élément avec des attributs
Dans le dossier bre05-js-j5, créez un dossier exercice-3. Dans le dossier exercice-3 créez un fichier index.html et un fichier index.js.
Le contenu du fichier index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" >
<title>
Exercice 3 : ajouter un élément avec des attributs
</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
</p>
<p>
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.
</p>
<p>
Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
</p>
<p>
Pour en savoir plus :
</p>
</body>
<script type="application/javascript" src="index.js"></script>
</html>
Votre JavaScript va devoir ajouter un <a> à la fin du body dont le texte est l'article de Wikipédia sur le Lorem Ipsum et l'attribut href est https://fr.wikipedia.org/wiki/Lorem_ipsum.
Exercice 4 : ToDo List
Dans le dossier bre05-js-j5, créez un dossier exercice-4. Dans le dossier exercice-4 créez un fichier index.html et un fichier index.js.
Le contenu du fichier index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" >
<title>
Exercice 4 : ToDo List
</title>
</head>
<body>
</body>
<script type="application/javascript" src="index.js"></script>
</html>
Le contenu du fichier index.js:
window.addEventListener("DOMContentLoaded", () => {
let todos = [
"Rappeler l'école",
"Faire les courses",
"Récupérer le colis à la Poste",
"Faire la litière du chat",
"Ranger le bureau"
];
});
Votre JavaScript va devoir faire en sorte d'afficher un <ul> qui contient une <li> pour chacune des tâches du tableau todos.
Votre JavaScript va devoir faire en sorte que lorsque l'on clique sur l'une de ces <li> son texte devient barré.
12 January 2026