DébutantNon commencé

Exercice 7.7 · 10 min · 0 tentative

Créer des éléments

🎯 Objectif

Créer de nouveaux éléments HTML avec JavaScript et les ajouter à la page.

📖 Contexte

Jusqu'ici, tu as modifié des éléments qui existaient déjà dans le HTML. Mais JavaScript permet aussi d'en créer de nouveaux et de les insérer dans la page.

C'est le pattern en 3 étapes :

// 1. Créer l'élément (en mémoire)
const paragraphe = document.createElement("p")

// 2. Le configurer (texte, classes, style...)
paragraphe.textContent = "Salut le monde !"

// 3. L'ajouter dans la page
document.body.appendChild(paragraphe)

Créer, configurer, ajouter

ÉtapeMéthodeRôle
1. Créerdocument.createElement("tag")Crée un élément en mémoire
2. Configurerelement.textContent = "..."Donne du contenu à l'élément
3. Ajouterparent.appendChild(element)Place l'élément dans la page

Pourquoi createElement ?

ApprocheAvantageInconvénient
createElement + textContentSûr, précis, performantPlus de code
innerHTMLPlus court à écrireRisque de sécurité (XSS)

createElement est plus sûr. Avec textContent, le texte est toujours traité comme du texte brut. Avec innerHTML, du code malveillant pourrait s'exécuter si le texte vient d'un utilisateur. Prends l'habitude d'utiliser createElement + textContent !

📝 Consigne

  1. Donne le texte "Pomme" au <li> déjà créé avec textContent
  2. Ajoute-le à la liste #liste avec appendChild()
  3. Dans le gestionnaire de clic du bouton, crée un nouveau <li> avec le texte "Banane" et ajoute-le à la liste

Comportement attendu :

  • Au chargement : la liste affiche Lait, Pain, Pomme
  • Au clic sur le bouton : Banane s'ajoute en bas de la liste

Objectifs

  • Utiliser createElement
  • Utiliser appendChild
  • Utiliser textContent
  • Un élément li existe

Lis bien les instructions et lance-toi !

Indices (0/3)

Indice 1 verrouillé
Indice 2 verrouillé
Indice 3 verrouillé