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

  • lj.d

    bonjour, est-ce-que mon code est correcte? je vois l'élément qui a été rajouté mais je ne peux pas valider : " Avez-vous bien ajouté un quatrième li avec le contenu "Item 4" "

  • benoit.pauillac-24

    Bonjour, je sèche sur mon probleme :

  • mathieu.finocchiaro

    var element = document.createElement("li"); var texte = document.createTextNode("Item 4"); var balise = element.appendChild(texte); document.querySelector("ul").appendChild(balise); est ce ok?

  • s.gaudefroy

    Bonjour, comme commenté il y à 9 jours par vos soins, il y a toujours ce problème concernant l'ajout d'un élément de la liste à puce qui ne s'effectue pas correctement. Il est donc impossible de valider cet exercice. Pouvez vous faire remonter l'information à nouveau. Merci.

91 Commentaires

  • lj.d

    lj.d

    bonjour, est-ce-que mon code est correcte? je vois l'élément qui a été rajouté mais je ne peux pas valider : " Avez-vous bien ajouté un quatrième li avec le contenu "Item 4" "

    le 15/05/2018 à 22h32

  • mram

    mram Administrateur

    Bonjour, à la troisième ligne, pas besoin de déclarer de variable, juste faire appendChild() . Et dernière ligne remplacer la variable "balise" par la bonne.

    le 18/05/2018 à 05h50

  • mathieu.finocchiaro

    mathieu.finocchiaro

    var element = document.createElement("li"); var texte = document.createTextNode("Item 4"); var balise = element.appendChild(texte); document.querySelector("ul").appendChild(balise); est ce ok?

    le 16/12/2016 à 16h49

  • s.gaudefroy

    s.gaudefroy

    Bonjour, comme commenté il y à 9 jours par vos soins, il y a toujours ce problème concernant l'ajout d'un élément de la liste à puce qui ne s'effectue pas correctement. Il est donc impossible de valider cet exercice. Pouvez vous faire remonter l'information à nouveau. Merci.

    le 17/09/2016 à 09h33

  • jovidal

    jovidal

    Toujours pas corrigé après 8 mois quand même ... J'imagine que mon code est bon ?

    le 06/06/2017 à 16h33

  • jenebakone

    jenebakone

    bonjour mon code contient il une erreur?Merci

    le 31/10/2016 à 10h26

  • Marodheure

    Marodheure

    Je ne connais pas grand chose au javascript, donc je ne sais pas pourquoi les instructions indiquées ne nous amènent pas au bon résultat, mais j'ai réussi à obtenir le bon résultat et donc valider l'exercice. Donc quelque indices : premièrement regardez le code de la page avec l'option "inspecter la page" de votre navigateur et dedans regardez le changement au niveau de la liste avant et après l'exécution du script, deuxièmement utilisez element.innerHTML = quelque chose. Bonne chance.

    le 22/05/2017 à 18h14

  • mram

    mram Administrateur

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

    le 05/10/2016 à 21h35

  • mram

    mram Administrateur

    Cet exercice bug car il ajoute bien "item4" dans les résultats mais pas sous forme de <li> même si notre code le précise bien, donc ne tenez pas compte de l'erreur. Votre code est juste.

    le 18/12/2016 à 18h48

  • mram

    mram Administrateur

    Non il est correct, le simulateur de navigateur (page Résultats) ne prend pas bien en compte les listes <li> même si votre script ajoute bien l'élément. Votre exercice est donc juste.

    le 02/11/2016 à 20h41

  • mram

    mram Administrateur

    C'est fait :)

    le 21/09/2016 à 09h06

  • yaacov.mhm770.ep

    yaacov.mhm770.ep

    Ce code : // 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); ne marche pas. En essayant avec des console.log : var element = document.createElement("p"); // Création d'une balise p console.log(element); var texte = document.createTextNode("Ceci est une chaîne de caractères"); // On crée du texte console.log(texte); var balise = element.appendChild(texte); // on ajoute le texte dans l'élément p console.log(balise); document.querySelector("#largeur_contenu").appendChild(balise); // On ajoute la balise p et son texte dans un div présent dans le DOM ça donne ça : <p></p> "Ceci est une chaîne de caractères" "Ceci est une chaîne de caractères" Le bon code est : var element = document.createElement("p"); // Création d'une balise p console.log(element); var texte = document.createTextNode("Ceci est une chaîne de caractères"); // On crée du texte console.log(texte); element.appendChild(texte); // on ajoute le texte dans l'élément p console.log(element); var balise = document.querySelector("#largeur_contenu").appendChild(element); // On ajoute la balise p et son texte dans un div présent dans le DOM au lieu de : // 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);

    le 19/12/2016 à 11h13

  • patricerameaux

    patricerameaux

    bonjour : element.appenchild is not a function : ça veut dire quoi ?

    le 21/10/2016 à 11h38

  • patricerameaux

    patricerameaux

    j'ai "element.appenchild is not a function" OK mais une autre question me vient : pourquoi faut-il utiliser les "" pour les éléments de ces fonctions : sont-ils interprétés comme des chaînes de caractères ou est-ce une nomenclature choisie (à tort à mon avis)

    le 21/10/2016 à 11h59

  • y.redjah

    y.redjah

    j'ai bien compris que l'exercice beug je voulais juste savoir si j'ai le bon code ? var element = document.createElement("li"); var texte = document.createTextNode("item 4"); var balise = element.appendChild(texte); document.querySelector("ul").appendChild(balise);

    le 29/04/2017 à 15h42

  • patricerameaux

    patricerameaux

    j'ai "element.appenchild()" is not a function : que faut-il en penser ?

    le 21/10/2016 à 14h21

  • mram

    mram Administrateur

    Oui votre code est bon. Un grosse mise à jour de la plateforme arrive en Juin. Certains bugs seront corrigés à cette occasion.

    le 07/06/2017 à 13h47

  • mram

    mram Administrateur

    Oui votre code est correct :)

    le 04/05/2017 à 12h11

  • mram

    mram Administrateur

    Votre code est correct, ne tenez pas compte du message. Comme j'ai dit plus haut, cet exercice va être refait.

    le 24/10/2016 à 13h17

  • pascal-ds

    pascal-ds

    bonjour, je revise avant de commencer lundi la formation (tan-tan-taaaan !^^). je reviens sur les exercices non terminés... j'ai essayé ici avec document.getElementsByTagName('ul')[0], au lieu du querySelector que j'avais essayé auparavant. Le script fonctionne (sans la bulle) et le message d'erreur est le même qu'avec querySelector

    le 13/10/2016 à 10h38

  • mram

    mram Administrateur

    Bonjour, attention cet exercice bug donc vous ne pourrez pas le valider de toute façon. Mais votre code est correct.

    le 13/10/2016 à 11h13

  • pascal-ds

    pascal-ds

    Bonjour, dans l'exemple, il doit y avoir une erreur : il manque "Name" après "Tag" non ? Lorsque j'essaie avec document.getElementByTagName("ul"), j'ai le message qui me dit que ce n'est pas une fonction. effectivement, le script ne fonctionne pas. En revanche, si j'utilise querySelector (comme dans un exercice précédent), le script focntionne (à ceci près qu'il n'y a pas de puce qui s'affiche devant le 'Item 4' mais j'ai le message "avez vous bien affiché...". Pour info, j'ai essayé l'exercice sur le site de W3school avec la même syntaxe et cela fonctionne parfaitement (il y a même la puce...) bizarre...

    le 07/09/2016 à 11h00

  • mram

    mram Administrateur

    C'est bien "getElementsByTagName" dans l'énoncé, je vais mettre à jour. Cependant, rappelez-vous que cette fonction ne retourne pas un seul élément HTML mais une collection de tous les éléments trouvés dans le DOM. Et une collection se parcoure comme un tableau pour accéder à ses éléments. Et ici il n'y a forcément qu'un seul élément retourné .... :)

    le 08/09/2016 à 14h06

  • pascal-ds

    pascal-ds

    vous ne répondez pas à l'intégralité de ma (longue question). pourquoi cela fonctionne sur l'autre site ? pourquoi avec querySelector, j'obtiens bien le remplacement du texte, mais sans la balise ? surtout que dans un exercice précédent vous m'avez conseillé - pour les mêmes raisons évoquées dans la réponse ci-dessus - d'utiliser de préférence querySelector.

    le 08/09/2016 à 16h28

  • mram

    mram Administrateur

    Donnez le lien du site ou vous avez fait le test, je vais regarder...

    le 08/09/2016 à 17h22

  • mram

    mram Administrateur

    Pourquoi avec querySelector ça marche ? Et bien parce que cette fonction ne retourne qu'un seul élément (le premier trouvé et correspondant au sélecteur utilisé). "getElementsByTagName" retourne une collection (ou tableau) de tous les éléments trouvés : donc pour récupérer un élément en particulier dans ce tableau il faut pointer avec un itérateur.

    le 08/09/2016 à 17h25

  • mram

    mram Administrateur

    Exemple : Si une page contient 3 éléments <p>, alors "getElementsByTagName('p')" sera un tableau (ou collection) avec 3 éléments. Donc si on veut faire une action sur ces éléments, il faut les parcourir avec une boucle. Si on veut travailler sur le 2ème <p> uniquement il faut le utiliser "getElementsByTagName('p')[1]" et là ça marchera.

    le 08/09/2016 à 17h28

  • mram

    mram Administrateur

    De même avec "querySelectorAll" qui retourne une collection. Après pourquoi je préconise d'utiliser la méthode "querySelector" (ou querySelectorAll) plutôt que getElementsByTagName (et ses variantes getXXX) c'est parce que avec les premiers vous pouvez utiliser tous les sélecteurs CSS existants là où avec les getXXX c'est soit le nom de la balise (p, div,...) ou sa class ou son id. Après ce n'est qu'un conseil, vous optez pour l'option qui vous sied le mieux.

    le 08/09/2016 à 17h31

  • mram

    mram Administrateur

    Pour la liste à puce ajoutée sans la "bulle" devant. Je pense que ça vient du simulateur utilisé pour émuler la fenêtre du navigateur qui doit pas bien sgérerr les éléments HTML insérés via Javascript. Je remonte ça auprès de notre développeur.

    le 08/09/2016 à 17h46

  • thierry.galabru

    thierry.galabru

    Bonjour, " AVEZ-VOUS BIEN AJOUTÉ UN QUATRIÈME LI AVEC LE CONTENU "ITEM 4". Le item 4 apparait bien dans la fenetre "resultat", à la suite des 3 autres Li, mais sans le petit point devant ( en fait, pour résumer, exactement même problème que Pascal DS. ( 1er com). Je n'ai aucune autre idée. Un indice SVP ? merci.

    le 01/10/2016 à 10h49

  • bsmeyers84

    bsmeyers84

    TYPEERROR: DOCUMENT.GETELEMENTSBYTAGNAME(...).APPENDCHILD IS NOT A FUNCTION

    le 13/09/2016 à 15h18

  • mram

    mram Administrateur

    On ne sait pas d'où vient ce bug, il est prévu de revoir l'exercice. J'ai déjà fait remonter l'information. Votre code est OK.

    le 01/10/2016 à 14h14

  • dahmaniali64

    dahmaniali64

    var element, texte, balise; element = document.createElement("li"); texte = document.createTextNode("Item 4"); balise = element.appendChild(texte); var ulElts = document.getElementsByTagName("ul"); ulElts[0].appendChild(balise); ca code execute mais " AVEZ-VOUS BIEN AJOUTÉ UN QUATRIÈME LI AVEC LE CONTENU "ITEM 4" et cette code execute var element, texte, balise; element = document.createElement("li"); texte = document.createTextNode("Item 4"); balise = element.appendChild(texte); document.querySelector("ul").appendChild(balise); " AVEZ-VOUS BIEN AJOUTÉ UN QUATRIÈME LI AVEC LE CONTENU "ITEM 4"

    le 01/10/2016 à 16h37

  • mram

    mram Administrateur

    Et oui, relisez tous mes commentaires dans cet exercice ça devrait vous aider ...

    le 13/09/2016 à 19h33

  • ctognol

    ctognol

    Pareil même erreur pour moi.

    le 04/10/2016 à 17h25

  • doucette.manon

    doucette.manon

    message d'erreur: Cannot read property 'appendChild' of undefined ....

    le 11/09/2018 à 10h55

  • mram

    mram Administrateur

    Ligne 4 il faut utiliser la balise "texte".

    le 15/09/2018 à 07h31

  • molinari.eva

    molinari.eva

    Bonjour, je pense que mon code est correct, toutefois j'ai le message d'erreur : Avez-vous bien ajouté un quatrième li avec le contenu 'Item 4'. J'ai essayé le i majuscule ou minuscule rien ne change..

    le 26/11/2017 à 15h00

  • mram

    mram Administrateur

    Bonjour, non il n'est pas correct. Il y a des petites erreurs lignes 1 et 2 : ce n'est pas create.element ni create.TextNode : vérifiez la syntaxe de ces fonctions.

    le 26/11/2017 à 20h24

  • bretel.val

    bretel.val

    Bonjour, on me demande si j'ai bien déclaré les variables demandées.

    le 24/06/2017 à 16h57

  • mram

    mram Administrateur

    C'est un bug de la correction sur cet exercice en particulier. Votre code est juste sauf ligne 2 où il faudrait utiliser "createTextNode()".

    le 28/06/2017 à 15h28

  • tomasinilaura1988

    tomasinilaura1988

    Bonjour, j'ai une erreur, pouvez-vous me dire si c'est correct ? var element, texte, balise; element = document.createElement("li"); texte = document.createTextNode("Item 4"); balise = element.appendChild(texte); document.querySelector("ul").appendChild(balise);

    le 13/11/2017 à 21h24

  • mram

    mram Administrateur

    Bonjour, la 2eme ligne est inutile. Et à la dernière ligne ce n'est pas la variable "balise" qu'il faut indiquer.

    le 16/11/2017 à 17h51

  • gwendaniel35

    gwendaniel35

    Je crois comprendre qu'il y a un souci de validation pour cet exercice. Pouvez-vous me dire si mon code est bon, s'il vous plait ? Merci

    le 12/09/2017 à 21h08

  • mram

    mram Administrateur

    Bonjour, oui votre code est correct :)

    le 14/09/2017 à 13h21

  • slaouitaibi

    slaouitaibi

    Bonjour, j'ai trouvé pourquoi la puce n'apparait pas. En fait dans "ul.appendChild()" si on met 'balise' dans les parenthèses, il ne va afficher que le texte comme dernier enfant a ul. Hors, si dans la parenthèse on met element, alors il affichera la puce et le texte est affiché puisqu'on l'a deja ajouté a 'li' dans les ligne plus haut. En esperant que le correcteur soit d'accord avec moi.... j'espère qu'ils corrigeront le bug de correction

    le 13/09/2017 à 17h07

  • mram

    mram Administrateur

    Bonjour, bien vu.. C'était si simple que ne l'a même pas vu. Énoncé mis à jour, merci !

    le 14/09/2017 à 13h45

  • mram

    mram Administrateur

    Donc, la correction fonctionne bien .

    le 14/09/2017 à 13h46

  • philgd28

    philgd28

    Bonjour, je ne sais pas si la MAJ de la plateforme à été faites, mais c'est pénible, mon code passe, je vois je changement de l'exercice sous le code, de plus j'essaye aussi avec bracket, mais du coup tous les exercices ne sont pas validé ... :( . je pense que mon code est bon mais pouvez vous me le confirmer svp, merci

    le 14/08/2017 à 17h43

  • mram

    mram Administrateur

    Bonjour, oui votre code est correct sur tous les exercices sur le DOM . La plateforme a été mise à jour en juin, mais là il y a un bug récent avec la correction sur ces exercices en particulier. Vous êtes le premier à nous en faire part, nous allons regarder ça :)

    le 16/08/2017 à 15h11

  • Seb

    Seb

    Bonsoir. Je ne comprend pas le problème avec mon code. Est-il incorrect? Sur le rendu la balise li s'affiche pourtant bien malgré l'absence de puce.

    le 05/09/2017 à 00h42

  • mram

    mram Administrateur

    Bonjour, oui votre code est correct. Et oui le contenu est bien ajouté mais sans la puce et c'est ça qui bloque : on n'a pas encore trouvé pourquoi dans l'émulateur de navigateur la puce n'est pas ajoutée alors que le code JS est correct.

    le 06/09/2017 à 11h49

  • PDM-85

    PDM-85

    voici mon code. Pouvez vous verifier? Merci. var element = document.createElement("li"); var texte = document.createTextNode("Item 4"); var balise = element.appendChild(texte); document.querySelector("ul").appendChild(element);

    le 13/12/2018 à 15h02

  • meriam

    meriam Administrateur

    la variable balise de la ligne 3 est inutile, mettez element.appendChild(texte).

    le 13/12/2018 à 15h40

  • meriam

    meriam Administrateur

    la variable balise de la ligne 3 est inutile, mettez directement element.appendChild(texte)

    le 13/12/2018 à 15h41

  • titi-fernandes

    titi-fernandes

    Bonjour, Pouvez vous me confirmer (ou non ) mon code svp?

    le 25/09/2017 à 14h01

  • mram

    mram Administrateur

    Bonjour, la dernière version de votre code en date du 26/09 est correcte.

    le 29/09/2017 à 00h31

  • hboutonnet1

    hboutonnet1

    Mon code est il correct ?

    le 12/01/2018 à 14h14

  • mram

    mram Administrateur

    Bonjour, non la valeur dans .appendChild(...) n'était pas la bonne.

    le 16/01/2018 à 19h06

  • mg-27

    mg-27

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

    le 23/12/2018 à 22h34

  • meriam

    meriam Administrateur

    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 à 11h26

  • lusoroberto

    lusoroberto

    Mon code est-il correct s'il y a toujours un bug? Merci.

    le 28/11/2017 à 20h54

  • mram

    mram Administrateur

    Bonjour, votre code était incorrect, vous n'utilisiez pas la bonne variable à la dernière ligne.

    le 01/12/2017 à 00h17

  • lusoroberto

    lusoroberto

    C'est bon mon code fonctionne et est validé. Bien joué slaouitaibi

    le 29/11/2017 à 16h35

  • slaouitaibi

    slaouitaibi

    Bonjour, malgré ma proposition de correction, lorsque j'essai de valider l'exercice, il y a toujours l'erreur disant "Avez-vous bien ajouté un quatrième li avec le contenu "Item 4"."

    le 17/09/2017 à 11h44

  • mram

    mram Administrateur

    Bonjour, je confirme que la correction fonctionne bien. C'est peut-être du au i majuscule de item, mettre en minuscule.

    le 20/09/2017 à 15h16

  • gasnier.br

    gasnier.br

    Bonjour. Il me semble que mon code est correct mais je ne parviens pas à le valider... le message d'erreur est : Avez-vous bien ajouté un quatrième li avec le contenu "Item 4".Merci de votre aide.

    le 12/01/2018 à 19h52

  • mram

    mram Administrateur

    Bonjour, c'est la valeur dans .appendChild() qui n'est pas la bonne.

    le 16/01/2018 à 19h27

  • bernardraphael13

    bernardraphael13

    bonjour un gros souci voila mon code

    le 30/06/2017 à 11h39

  • mram

    mram Administrateur

    Bonjour, non votre code est correct. C'est un souci de correction automatique ici je pense.

    le 07/07/2017 à 10h24

  • bernardraphael13

    bernardraphael13

    bonjour voila mon code var element = document.createElement("li"); // on créé du texte var texte = document.createTextNode("item 4"); // on ajoute le texte dans l'élément li var balise = element.appendChild(texte); // on ajoute la balise li et son texte dans un ul présent dans le DOM document.querySelector("ul").appendChild(balise); il me fait pas l'ajout et donc erreur pouvez vous m'aider

    le 30/06/2017 à 11h40

  • mram

    mram Administrateur

    Bonjour, votre code fonctionne bien, je l'ai testé. Ici c'est la correction automatique qui bug.

    le 07/07/2017 à 10h27

  • bretel.val

    bretel.val

    Je viens de faire la modification mais maintenant j'ai ce message "Avez-vous bien ajouté un quatrième li avec le contenu "Item 4".

    le 30/06/2017 à 13h21

  • mram

    mram Administrateur

    Bonjour, votre code est bon, n'en tenez pas compte.

    le 07/07/2017 à 10h28

  • alexismoquet

    alexismoquet

    bjr, mon code est-il correct ?

    le 07/10/2017 à 09h24

  • mram

    mram Administrateur

    Bonjour, vous mettez la mauvaise variable dans appendChild() à la dernière ligne.

    le 09/10/2017 à 00h47

  • 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 Administrateur

    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

  • rom1.dev.web

    rom1.dev.web

    J'ai fait tout les exercices du DOM mais il reste beaucoup de bug je ne peut pas valider plus que 66% ! Si vous pouvez jeter un coup d’œil pour voir si les codes sont bons ?

    le 26/08/2017 à 14h00

  • mram

    mram Administrateur

    Bonjour, non il n'y a que celui-ci qui bug (votre code est correct par ailleurs). Dans cette sous-section des exercices sur le DOM il n'y a que 3 exercices. comme celui-ci bug vous ne pouvez en valider que 2/3, soit 66%. Mais on ne vous en tiendra pas rigueur.

    le 30/08/2017 à 13h30

  • quentinjoubert123-80

    quentinjoubert123-80

    Bonjour, pourriez vous me dire ce qui ne va pas dans mon code? J'obtiens le message d'erreur suivant : Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

    le 05/03/2018 à 18h50

  • mram

    mram Administrateur

    Bonjour, à la dernière ligne, si vous mettez la variable element entre guillemet, ce n'est plus une variable pour Javascirpt c'est juste du texte.

    le 08/03/2018 à 22h52

  • evelyne.mazars-64

    evelyne.mazars-64

    Bonjour, je viens de valider cet exercice en suivant les conseils de slaouitaibi. Je pense que le quiproquo vient de l'exemple qui est dans la leçon. On crée trois variables : celle de la balise (element), celle du contenu (texte) et celle qui ajoute le contenu dans la balise (balise). Dans l'exemple, c'est la fusion des deux créations (balise) qui est ajoutée en appendChild du div. Or, pour que ça fonctionne correctement dans notre exercice, il faut ajouter uniquement la balise créée en premier (element). Je ne suis pas certaine d'avoir été très claire...

    le 29/08/2018 à 15h28

  • doucette.manon

    doucette.manon

    Je n'arrive pas à valider l'exercice, j'ai pourtant modifié mon erreur

    le 17/09/2018 à 12h59

  • mram

    mram Administrateur

    Attention ligne 2 vous avez mal écrit la variable.

    Le reste du code est juste.

    le 02/10/2018 à 05h44

  • triplaxs

    triplaxs

    var element, texte, balise; var elememt =document.createElement("li"); var texte = document.createTextNode( "Item 4"); var balise = element.appendChild(texte); document.querySelector("ul").appendChild(balise);que fair ?

    le 09/09/2017 à 18h38

  • mram

    mram Administrateur

    Bonjour, ici la correction bug. Votre code est bon, si vous activez JS vous verrez le nouvel item ajouté. Mais la puce devant n'est pas ajoutée et du coup ça ne valide pas. On ne sait pas pourquoi la puce n'est pas ajoutée ...

    le 12/09/2017 à 16h57

  • lilla

    lilla

    Bonjour, je ne trouve pas l'erreur dans mon code, pourriez-vous m'aider ? Merci !

    le 27/01/2018 à 14h47

  • mram

    mram Administrateur

    Bonjour, oui dans le dernier .appendChild() vous aviez appelé la mauvaise variable. C'est bien l'élément "li" créer au début qu'il faut utiliser.

    le 30/01/2018 à 18h42

  • mram

    mram Administrateur

    J'ai simplifié les instructions pour que ce soit plus compréhensible et clair. L'exercice devrait être plus accessible.

    le 30/01/2018 à 18h47

  • lilla

    lilla

    Bonjour, j'ai trouvé le problème : l'erreur est dans l'explication de cette leçon. La méthode appendChild retourne seulement l'élément ajouté et non l'ensemble. Donc la dernière ligne est document.querySelector("ul").appendChild(element); et non document.querySelector("ul").appendChild(balise);

    le 27/01/2018 à 23h55

  • mram

    mram Administrateur

    Oui, j'ai modifié l'énoncé qui correspondait à une ancienne version de l'exercice. J'en ai profité pour le simplifier, normalement il sera plus accessible. Merci !

    le 30/01/2018 à 18h51

  • vahan.barsamian

    vahan.barsamian

    Ce code est-il juste :var element,texte,balise; element=document.createElement('li'); texte=document.createTextNode("Item 4"); balise=element.appendChild(texte); document.getElementsByTagName('ul')[0].appendChild(balise);

    le 10/09/2017 à 17h36

  • mram

    mram Administrateur

    Bonjour, à part le [0] qui est inutile, le reste est correct. Mais attention ici la correction bug car quand on exécute le JS l'élément est bien ajouté mais sans la puce devant ...

    le 12/09/2017 à 17h06

  • slaouitaibi

    slaouitaibi

    toujours pas. j'ai modifié en mettant le i en minuscule, mais toujours la meme erreur.

    le 20/09/2017 à 21h10

  • mram

    mram Administrateur

    Et si vous mettez les 2 dernières lignes sur une seule ? document.querySelector("ul").appendChild(element);

    le 20/09/2017 à 22h05

  • ma.nicolas-46

    ma.nicolas-46

    Bonjour, il semblerait que l"exercice soit un peu buggé selon les commentaires. Vous pouvez me confirmer mon code svp ? Je passe à la suite pour le moment

    le 03/07/2018 à 10h47

  • mram

    mram Administrateur

    Bonjour, non cet exercice n'est pas buggé. Quelle erreur avez-vous ?

    le 05/07/2018 à 05h08

  • Bérénice

    Bérénice

    peu import la majuscule pour valider l'exercice il ne faut pas mettre le "ul" après balise mais après element... slaouitaibi a raison ul.appendChild(element)

    le 21/09/2017 à 10h47

  • mram

    mram Administrateur

    Oui c'est ce qui est indiqué dans l'exemple du "cours" . Vous pouvez pratiquement copier / coller le code de l'exemple pour faire l'exercice.

    le 22/09/2017 à 18h00

  • nkeshimanabrice-37

    nkeshimanabrice-37

    merci meriam de cette correction...

    le 06/06/2019 à 10h18

  • meriam

    meriam Administrateur

    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

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>