Exercice 1/3

Dans le fichier script.js :

  • déclarez les variables element, texte;
  • créez une balise li et affectez-la à element;
  • créez le texte "Item 4" et affectez-le à texte;
  • ajoutez le texte dans le li que vous avez créé;
  • récupérez le ul présent dans le DOM;
  • ajoutez à ul le contenu de element;
  • cliquez sur Soumettre ma réponse.

Leçon 1/3

Il est possible d'ajouter un nouvel élément HTML avec la fonction .appendChild(). Cette fonction ne s'utilise pas seule, elle est souvent associée à :

  • .createElement() pour créer une nouvelle balise non présente dans le DOM;
  • .createTextNode() pour ajouter du texte dans une balise;
  • une des fonctions vues pour trouver un élément dans le DOM;

Exemple :

// on créé une balise p
var element = document.createElement("p");
// on créé du texte
var texte = document.createTextNode("Voici du texte");
// on ajoute le texte dans l'élément p
var balise = element.appendChild(texte);
// on ajoute la balise p et son texte dans un div présent dans le DOM
document.querySelector("div").appendChild(balise);

getElementsByTagName() contient une collection (ou tableau) des éléments HTML trouvés. Pour savoir comment récupérer un élément au sein de la collection, revoyez les exercices de la catégorie "Trouver un élément HTML".

Commentaires les mieux notés

185 Commentaires

  • hgadessaud-13

    hgadessaud-13

    Bonjour je ne comprend pas mon erreur ! Vous devez ajouter la variable texte dans la balise element"

    le 02/03/2023 à 15h24

  • Patricio M

    Patricio M Admin

    Il te manque le element.appendChild(texte);

    le 03/03/2023 à 09h28

  • gilles.jamain2-80

    gilles.jamain2-80

    Vous devez ajouter la balise li dans la balise ul ????

    le 07/11/2022 à 16h05

  • Patricio M

    Patricio M Admin

    Gilles, déclare la variable et tu lui assigne sa valeur dans une autre ligne... le bot ne valide pas sinon

    le 08/11/2022 à 08h31

  • formationevelyne-33

    formationevelyne-33

    je ne peux pas soumettre ???

    le 23/03/2022 à 15h07

  • meriam

    meriam Admin

    Bonjour, quel est votre problème exactement?

    le 28/03/2022 à 08h49

  • brandon.beunard-85

    brandon.beunard-85

    Erreur: Vous devez ajouter la variable texte dans la balise element

    le 15/11/2021 à 23h31

  • meriam

    meriam Admin

    Bonjour, faites comme ce code :element.appendChild(texte); document.querySelector("ul").appendChild(element)

    le 16/11/2021 à 23h09

  • ptitmitch44-51

    ptitmitch44-51

    Bonjour je ne compred pas mon erreur !

    le 19/10/2021 à 14h02

  • meriam

    meriam Admin

    Bonjour, je vois que votre code est dupliqué, pourquoi??

    le 19/10/2021 à 14h24

  • bilismira-75

    bilismira-75

    Bonjour, pouvez -vous m'aider svp. je suis bloqué

    le 18/07/2021 à 15h07

  • meriam

    meriam Admin

    Bonjour, corrigez la dernière instruction :document.querySelector("ul").appendChild(element.appendChild(li)); par celle ci : document.querySelector("ul").appendChild(element);

    le 20/07/2021 à 00h49

  • antoinesegard59-57

    antoinesegard59-57

    document.querySelector("ul").appendChild(element.appendChild(texte)); a quoi sert cette ligne ??

    le 30/05/2021 à 11h31

  • meriam

    meriam Admin

    Bonjour, cette ligne de code est inutile dans votre code et elle est remplacée par :element.appendChild(texte); document.querySelector("ul").appendChild(element);

    le 31/05/2021 à 10h50

  • niruapp-13

    niruapp-13

    Bonjour, voici mon code var element; element= document.createElement("li"); var texte; texte = document.createTextNode("Item 4"); document.querySelector("ul").appendChild(element.appendChild(texte)); document.querySelector("li").appendChild(element.appendChild(texte)); Et voici l'erreur obtenu "Vous devez ajouter la variable texte dans la balise element" Quelle est mon erreur ?

    le 18/03/2021 à 14h49

  • meriam

    meriam Admin

    Bonjour, vous devez ajouter l'élement dans la liste ul.

    le 18/03/2021 à 15h25

  • jeromeblandel

    jeromeblandel

    Bonjour, je ne comprend pas ce que je dois faire de plus...

    le 19/01/2021 à 11h38

  • meriam

    meriam Admin

    Bonjour, la vairable balise n'est pas demandée, c'est inutile de l'ajouter. Pour récupérer le ul présent dans le DOM; ajoutez à ul le contenu de element : document.querySelector("ul").appendChild(element);

    le 19/01/2021 à 20h12

  • melyssa.auberton-21

    melyssa.auberton-21

    Zut, je ne comprends pas mon erreur ici...var element = document.createElement("li"); var texte = document.createTextNode("Item 4"); var balise = element.appendChild(texte); document.querySelector("ul").appendChild(balise);

    le 16/06/2020 à 11h08

  • meriam

    meriam Admin

    Bonjour, Vous devez ajouter la variable texte dans la balise element puis ajoutez element à la liste.

    le 16/06/2020 à 12h28

  • nkeshimanabrice-37

    nkeshimanabrice-37

    merci meriam de cette correction...

    le 06/06/2019 à 06h18

  • meriam

    meriam Admin

    Bon courage.

    le 06/06/2019 à 10h15

  • Yoann_B

    Yoann_B

    Un code qui a marché pour info : var element = document.createElement('li'); var texte = document.createTextNode("Item 4"); element.appendChild(texte); document.querySelector("ul").appendChild(element);

    le 03/05/2019 à 09h08

  • nkeshimanabrice-37

    nkeshimanabrice-37

    je ne comprends du tout ce message d'erreur votre variable élément n'est pas une balise li alors que c'est correct

    le 12/04/2019 à 07h14

  • meriam

    meriam Admin

    Bonjour, pour commencer vous avez déclaré les variables element, texte deux fois avec le mot clé var, la variable balise n'existe pas. Il faut ajouter à ul le contenu de element.

    le 12/04/2019 à 08h01

  • kfaconca

    kfaconca

    Got it :), le "var balise" ds la leçon était un piège :)

    le 06/01/2019 à 02h19

  • mg-27

    mg-27

    je suis dsl je n'y arrive pas pvz vous m'aider ?

    le 23/12/2018 à 20h34

  • meriam

    meriam Admin

    Bonjour, pas besoin de déclarer la variable element deux fois (il faut déclarer une variable une seule fois). Pas besoin de déclarer la variable a (ligne5). A la ligne 6, ajoutez element à la liste (document.querySelector('ul').appendchild(element);

    le 24/12/2018 à 09h26

Pour publier un commentaire, vous devez vous connecter.
index.html
script.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM</title> </head> <body> <h1>Titre h1</h1> <p class="par">Paragraphe 1</p> <h2>Titre h2</h2> <p class="par">Paragraphe 2</p> <ul> <li>Item 1</li> <li>Item 2</li> <li><a href="http://www.google.fr">Item 3</a></li> </ul> <div id="bloc"> <h3>Titre h3</h3> <p class="par">Paragraphe 4</p> </div> <script src="script.js"></script> </body> </html>
var element; element= document.createElement("li"); var texte; texte = document.createTextNode("Item 4"); document.querySelector("ul").appendChild(element.appendChild(texte));
http://localhost:8080