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

  • nkeshimanabrice-37

    nkeshimanabrice-37

    merci meriam de cette correction...

    le 06/06/2019 à 10h18

  • meriam

    meriam Admin

    Bon courage.

    le 06/06/2019 à 14h15

  • kfaconca

    kfaconca

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

    le 06/01/2019 à 04h19

  • Babeloued

    Babeloued

    Merci Mériam, j'entrevoie les subtilités incontournalbles à la virgule près.

    le 04/12/2018 à 01h10

  • 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 à 13h08

  • mram

    mram Admin

    Comme j'ai dit plus haut à d'autres, ne prenez pas l'erreur en compte. Votre code est juste.

    le 05/10/2016 à 21h35

20 Commentaires

  • 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 à 15h08

  • meriam

    meriam Admin

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

    le 16/06/2020 à 16h28

  • nkeshimanabrice-37

    nkeshimanabrice-37

    merci meriam de cette correction...

    le 06/06/2019 à 10h18

  • meriam

    meriam Admin

    Bon courage.

    le 06/06/2019 à 14h15

  • 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 à 13h08

  • 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 à 11h14

  • 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 à 12h01

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));