Exercice 3/3

Dans le fichier script.js :

  • récupérez le p qui est dans le div;
  • remplacer le contenu actuel "Paragraphe 4" par "Paragraphe 3";
  • cliquez sur Soumettre ma réponse.

Note : Il existe une multitude de façons de résoudre cet exercice, la correction ne va tester que le résultat, à vous de trouver votre façon de faire.

Leçon 3/3

Si il est possible d'ajouter et supprimer un élément enfant avec .appendChild() et .removeChild(). Il est aussi possible de remplacer un élément (balise HTML, texte) avec replaceChild(). Comme les deux autres, cette fonction ne s'utilise pas seule, il faut aussi :

  • une des fonctions vues pour trouver un élément dans le DOM auquel on souhaite remplacer l'élément enfant (balise ou texte);
  • .childNodes() pour récupérer l'élément enfant que l'on souhaite remplacer;
  • .createElement() ou .createTextNode(), pour créer le nouvel élément (balise ou texte) qui remplacera l'ancien;

Exemple :

// on créé un nouvel élément de type texte
var nouveau = document.createTextNode("Nouveau texte");
// on récupère le premier "li" de "ul" (1ère méthode au choix)
var li = document.querySelector("ul li");
// on récupère le premier "li" de "ul" (2ème méthode au choix)
var li = document.querySelectorAll("ul li").childNodes[0];    
// on récupère le texte actuel (celui qu'il faut remplacer)
var ancien = li.childNodes[0];
// on remplace le texte du premier "li" par le nouveau texte
li.replaceChild(nouveau, ancien);

Commentaires les mieux notés

  • armand1807

    petite astuce pour aller encore plus vite ;) aller dans le fichier html mettez 3 à la place de 4 dans le p de div ! enjoy :) haha ^^

  • Damien

    Mon code fonctionne et l'exercice est validé mais je ne comprends pas pourquoi le texte du p est en childNodes[0] et non pas en [1] car p a un attribut class qui devrait compter en 0, non ? Qu'est-ce que j'ai raté ?

  • mram Administrateur

    Ligne 1 il faut sélectionner l'élément <p> dans le <div>. Et ligne 3, ce n'est pas le bon chiffre pour récupérer le bon élément.

  • Ana_elle

    Bonjour, j'arrive à valider l'exercice en utilisant document.querySelector, mais cela ne fonctionne pas quand j'essaie avec document.querySelectorAll. Pouvez-vous me dire ce qui ne va pas dans mon code svp ? var p = document.querySelectorAll("div p").childNodes[0]; var nouveau = document.createTextNode("Paragraphe 3"); var ancien = p.childNodes[0]; p.replaceChild(nouveau, ancien); Merci encore pour votre aide tout au long des exercices.

53 Commentaires

  • armand1807

    armand1807

    petite astuce pour aller encore plus vite ;) aller dans le fichier html mettez 3 à la place de 4 dans le p de div ! enjoy :) haha ^^

    le 18/08/2017 à 15h41

  • mram

    mram Administrateur

    Ah non normalement c'est pas possible, vous devriez avoir une erreur qui vous dit de ne pas modifier le code de départ. Justement pour obliger à passer par Javascript pour le faire, sinon ça serait trop facile :)

    le 22/08/2017 à 13h00

  • Damien

    Damien

    Mon code fonctionne et l'exercice est validé mais je ne comprends pas pourquoi le texte du p est en childNodes[0] et non pas en [1] car p a un attribut class qui devrait compter en 0, non ? Qu'est-ce que j'ai raté ?

    le 13/12/2016 à 19h42

  • mram

    mram Administrateur

    Ligne 1 il faut sélectionner l'élément <p> dans le <div>. Et ligne 3, ce n'est pas le bon chiffre pour récupérer le bon élément.

    le 18/12/2016 à 18h57

  • Ana_elle

    Ana_elle

    Bonjour, j'arrive à valider l'exercice en utilisant document.querySelector, mais cela ne fonctionne pas quand j'essaie avec document.querySelectorAll. Pouvez-vous me dire ce qui ne va pas dans mon code svp ? var p = document.querySelectorAll("div p").childNodes[0]; var nouveau = document.createTextNode("Paragraphe 3"); var ancien = p.childNodes[0]; p.replaceChild(nouveau, ancien); Merci encore pour votre aide tout au long des exercices.

    le 09/02/2017 à 18h54

  • jenebakone

    jenebakone

    bonsoir,pourriez vous m'indiquer mon erreur?Merci

    le 04/11/2016 à 21h56

  • mathieu.finocchiaro

    mathieu.finocchiaro

    allez ptite question pour l'exercice final! var rempl = document.querySelector("div"); var nouveau = document.createTextNode("Paragraphe 3"); var ancien = rempl.childNodes[3]; rempl.replaceChild(nouveau, ancien); msg: AVEZ VOUS BIEN REMPLACE LE CONTENU DU P DANS LE DIV.. Merci pour votre aide depuis le debut du tuto.

    le 16/12/2016 à 17h20

  • mram

    mram Administrateur

    Attention, ligne 2 vous créez la variable "p" mais vous récupérez un élément "div". On souhaite récupérer le "p" situé dans le "div". querySelector sera plus adapté à priori ...

    le 08/11/2016 à 14h58

  • mram

    mram Administrateur

    Votre code est beaucoup trop complexe, ça devrait tenir en 3 lignes, comme dans l'exemple.

    le 06/10/2016 à 00h28

  • Timo

    Timo

    Pouvez-vous m'aider s'il vous plait, je ne comprends pas bien. Dans l'exemple on récupère l'élément à remplacer avec getElementsByTagName, j'ai lu dans les exercices précédents qu'il était préférable de le faire avec querySelector, donc je l'ai fait. Mais ici, il y a une notion en plus, le .childNodes[0]. Si on utilise querySelector, doit-on ajouter aussi .childNodes[] après ? Et dans la dernière partie de l'exemple, j'ai beau remplacer tout comme dans l'exemple, rien n'y fait j'obtiens toujours une erreur. Pouvez-vous m'éclairer ? merci

    le 21/09/2016 à 22h47

  • mram

    mram Administrateur

    J'ai modifié l'énoncé et l'exemple pour qu'il soit plus clair. Normalement en suivant l'exemple ça doit être bon.

    le 08/11/2016 à 17h04

  • mram

    mram Administrateur

    Si ça fonctionne avec la première solution, utilisez celle-ci. Il n'est pas obligé d'utiliser les 2.

    le 14/02/2017 à 01h05

  • josepha.ferret

    josepha.ferret

    Bonjour, il me semble que l'exemple présente une erreur ; du fait d'avoir remplacé "getElementsByTagName" par "querySelector", l'utilisisation de ".childNodes[0]" n'a plus lieu d'être ligne 4.

    le 13/11/2016 à 19h06

  • mram

    mram Administrateur

    Dans l'exemple j'utilise .childNodes[0] car cette fonction récupère tous les éléments enfants (li) de l'élément sélectionné (ul) avec .getElementsByTagName(). Je me retrouve donc avec une collection (ou tableau) de plusieurs "li" et comme je veux que le 1er de la collection j'utilise l'itérateur [0] comme dans un tableau classique.

    le 22/09/2016 à 23h21

  • mram

    mram Administrateur

    Oui childNodes() peut être utilisé avec querySelector()

    le 22/09/2016 à 23h21

  • mram

    mram Administrateur

    Donc dans votre code il manque juste l'itérateur avec childNodes() car là on ne sait pas à quel élément de la collection (ou du tableau) vous voulez ajouter le nouveau texte.

    le 22/09/2016 à 23h24

  • cdezandee

    cdezandee

    var nouveau = document.createTextNode("Paragraphe 3"); var li = document.querySelector("p").childNodes[0]; var ancien = li.childNodes[0]; li.replaceChild(nouveau, ancien);

    le 15/11/2016 à 17h15

  • mram

    mram Administrateur

    @josepha.ferret : en effet, à moins qu'on utilise querySelectorAll(). Je vais proposer les deux options pour que ce soit clair. Merci.

    le 16/11/2016 à 19h02

  • nicolas.simon954

    nicolas.simon954

    Pourquoi var nouveau = "Paragraphe 3" ne peut-il pas fonctionner pour remplacer le texte ?

    le 14/04/2017 à 21h42

  • ctt

    ctt

    Bonjour, l'exécution du script semble donner le résultat attendu mais j'ai l'erreur "Avez-vous bien remplacé le contenu du paragraphe 'P' dans le 'DIV' ? " Pouvez-vous m'aider ? Merci d'avance

    le 16/11/2016 à 20h02

  • zulihan

    zulihan

    Bonsoir, J'ai terminé toutes les séries d'exercices html, css et javascript. Chaque exercice de chaque section a été validé, sauf exceptions lorsqu'il y a un bug qui n'a pas encore été corrigé et qui ne me permets pas de le valider. Cependant chaque "sous-section" apparaît à 0% d'achèvement alors que tous les exercices de chaque sous-section (sauf ceux qui bug) sont à 100%. Pourriez-vous regarder cela svp ? Merci d'avance.

    le 16/11/2016 à 20h23

  • piquet.alexandre

    piquet.alexandre

    Bonjour, j'obtiens le message d'erreur "TypeError: Second argument to Node.prototype.replaceChild must be a Node" alors que le résultat semble juste. Mon code : var nouveau = document.createTextNode("Paragraphe 4"); var p = document.querySelector("div p"); var ancien = p.childNodes[2]; p.replaceChild(nouveau, ancien);

    le 23/02/2017 à 18h36

  • mram

    mram Administrateur

    Car il faut utiliser une fonction spécifique pour créer un noeud de type "texte" . C'est .createTextNode().

    le 18/04/2017 à 13h38

  • mram

    mram Administrateur

    C'est pas [2] mais [0] qu'il faut mettre.

    le 24/02/2017 à 23h57

  • mram

    mram Administrateur

    Bonjour, j'ai fait remonter l'information. Merci.

    le 21/11/2016 à 13h06

  • mram

    mram Administrateur

    @ctt : votre ligne 1 est inutile. Ensuite ligne 4 "element" ne fait référence à rien dans votre script, il faudrait remplacer par "ancien" et en fin de ligne 4 rajouter .childNodes[0] à "ancien"

    le 21/11/2016 à 13h10

  • dahmaniali64

    dahmaniali64

    var pElt = document.body.childNodes[11].childNodes[3]; var bashElt = document.createElement("p"); // Création d'un élément li bashElt.class = "par"; // Définition de son identifiant bashElt.textContent = "Paragraphe 3"; // Définition de son contenu textuel // Remplacement de l'élément identifié par "perl" par le nouvel élément document.body.childNodes[11].replaceChild(bashElt, pElt);

    le 02/10/2016 à 15h15

  • mram

    mram Administrateur

    Et non, l'attribut "class" n'est pas considéré comme un enfant de "p".

    le 15/12/2016 à 12h08

  • irene.xifra

    irene.xifra

    J'ai l'erreur: Avez-vous bien remplacé le contenu du paragraphe "p" dans le "div" ? Je ne comprends pas...

    le 24/11/2017 à 14h46

  • mram

    mram Administrateur

    Bonjour, ce n'est pas 0 qu'il faut mettre dans .childNodes[] . Les valeurs d'attribut sont aussi considérées comme des noeuds dans le DOM.

    le 26/11/2017 à 20h11

  • molinari.eva

    molinari.eva

    Bonjour, je ne parviens pas à valider l'exercice, je regarde avec les différents commentaires mais je ne vois pas ce qui cloche.. Pouvez-vous m'aider svp ? Merci

    le 26/11/2017 à 15h31

  • mram

    mram Administrateur

    Bonjour, oui, il faut savoir que les attributs et leur valeurs compte aussi comme des noeuds dans le DOM, donc ce n'est pas zéro qu'il faut mettre dans .childNodes[...]

    le 26/11/2017 à 20h25

  • kriss.clotilde

    kriss.clotilde

    Bonjour, j'ai testé mon code mais cela ne fonctionne pas. Pouvez-vous m'aider à comprendre mon erreur svp ?

    le 22/09/2017 à 15h09

  • mram

    mram Administrateur

    Bonjour, votre code peut tenir en 3 lignes, là vous faites trop compliqué. Commencez par créer le texte (Paragraphe 3) puis sélectionnez le paragraphe "p" qui se trouve dans le "div" (avec querySelector), puis utilisez replaceChild() .

    le 25/09/2017 à 16h59

  • Babeloued

    Babeloued

    Mess : Erreur(s) : Vous devez modifier le contenu du paragraphe de la div par Paragraphe 3

    le 12/12/2018 à 18h24

  • meriam

    meriam Administrateur

    Ligne 2 vous avez sélectionné l'élément < p > dans le < div>. Et ligne 3, ce n'est pas le bon chiffre pour récupérer le bon élément.

    le 13/12/2018 à 15h21

  • bretel.val

    bretel.val

    Bonjour, c'est bizarre je ne vois aucunes modifications avec mon code pourtant j'ai fait comme dans la leçon.

    le 24/06/2017 à 16h51

  • mram

    mram Administrateur

    Bonjour, ligne 2 il faut sélectionner le "p" qui est dans un "div"

    le 29/06/2017 à 15h47

  • tomasinilaura1988

    tomasinilaura1988

    var nouveau = document.createTextNode("Paragraphe 3"); var recup = document.getElementsByTagName("div")[0]; var ancien = recup.childNodes[3]; recup.replaceChild(nouveau, ancien); ca marche mais ils disent que j'ai une erreur quand j'essaie de valider la réponse

    le 13/11/2017 à 23h08

  • mram

    mram Administrateur

    Bonjour, la ligne 2 est pas correcte. Utilisez plutôt .querySelector()

    le 16/11/2017 à 18h02

  • armand1807

    armand1807

    oui oui le robot ne valide pas ^^ mais on a le même résultat hehe ^^

    le 22/08/2017 à 13h51

  • mademoiselle.rama

    mademoiselle.rama

    Bonjour, je n'arrive pas à trouver mon erreur : var nouveau_texte = document.createTextNode("Paragraphe 3"); var ancien_texte = element.childNode[0]; element.replaceChild(nouveau_texte, ancien_texte); Merci pour votre aide

    le 01/11/2017 à 19h44

  • mram

    mram Administrateur

    Bonjour, c'est .childNodes[0] avec un "s" .

    le 04/11/2017 à 00h01

  • pe.boutruche-22

    pe.boutruche-22

    Encore un fois le code ne veux pas se valider alors qu’il fonctionne...

    le 05/02/2018 à 22h50

  • mram

    mram Administrateur

    Bonjour, non votre code ne fonctionne pas comme il le faudrait. On vous demande de sélecionner le "p" qui est dans le "div". Là vous sélectionnez directement le "div" et vous remplacez "<p>Paragraphe 4</p>" par "Paragraphe 3", il manque les balies HTML "p".

    le 06/02/2018 à 12h43

  • mram

    mram Administrateur

    Le plus simple est de sélectionner directement le paragraphe en question, puis changer le texte à l'intérieur.

    le 06/02/2018 à 12h43

  • bretel.val

    bretel.val

    Avez-vous bien remplacé le contenu du paragraphe "p" dans le "div" ?

    le 30/06/2017 à 14h21

  • mram

    mram Administrateur

    Bonjour, votre code est correct, je l'ai testé. Je note le bug.

    le 07/07/2017 à 10h46

  • guillaume.b81-47

    guillaume.b81-47

    Je voulais profiter de ce dernier exercice pour remercier Meriam qui m'a vraiment bien aiguillé tout au long de ce parcours :) Pour moi la phase d'apprentissage commence je rentre en formation dès lundi...Donc encore une fois merci Meriam et excellente continuation à vous...Guillaume

    le 11/04/2019 à 22h50

  • meriam

    meriam Administrateur

    Merci beaucoup Guillaume, bon courage.

    le 15/04/2019 à 11h32

  • gasnier.br

    gasnier.br

    Bonjour, mon code semble fonctionner sur la partie HTML quand je lance le script. Pour autant, impossible de valider ! Mon code est-il correct ? Si non, pourriez-vous m'éclairer. Merci.

    le 14/01/2018 à 20h02

  • mram

    mram Administrateur

    Bonjour, le nouveau contenu doit être "Paragraphe 3" .

    le 17/01/2018 à 19h46

  • belespoir38

    belespoir38

    var recupP=document.querySelector("div p"); var nouveautext=document.createTextNode("Paragraphe3"); var ancientext=recupP.childNodes[3]; recuppP.replaceChild(nouveautext, ancientext); Je ne trouve pas

    le 14/01/2018 à 20h31

  • mram

    mram Administrateur

    Bonjour, c'est la valeur de .childNodes[...] qui n'était pas correcte.

    le 17/01/2018 à 19h54

  • belespoir38

    belespoir38

    C'est bien childNodes[0], peut-être parce qu'il n'y a qu'un paragraphe dans div, et qui contient qu'un seul élément. Comme on commence à compter à partir de zéro, le 1er élément du paragraphe porte le numéro 0 ? Ou bien c'est un bug... Merci pour votre eclaircissement

    le 14/01/2018 à 20h47

  • mram

    mram Administrateur

    Bonjour oui c'est bien ça. L'élément "p" à un noeud enfant qui est le texte qu'il contient.

    le 17/01/2018 à 19h56

  • dilmi.chourouk

    dilmi.chourouk

    Finished >>> var p3 = document.createTextNode("Paragraphe 3"); var p = document.querySelector("div p"); var p4 = p.childNodes[0]; p.replaceChild(p3, p4);

    le 27/01/2018 à 00h01

  • nathalie.chenparis

    nathalie.chenparis

    Bonjour, j'ai le meme soucis que l'exercice suivant qui me m'indique que le selecteur 3 ne peux pas etre lu. Pouvez vous m'expliqué comment compté, par ce que je suis un peu perdu pour le cou. Voici mon code: var newtext = document.createTextNode("Paragraphe 3"); var p = document.querySelectorAll("div p").childNodes[3]; p.replaceChild(newtext, oldtext);

    le 25/05/2018 à 11h07

  • mram

    mram Administrateur

    Bonjour, et bien si on sélectionne le "p" qui est dans le "div", ce qui se trouve à la position [0] c'est le texte que l'on souhaite changer.

    le 28/05/2018 à 05h08

  • molinari.eva

    molinari.eva

    J'ai essayé différents chiffres ça ne fonctionne pas... Je fais sûrement une erreur quelque part ou il y a une chose que je ne saisi pas mais je ne vois pas.. Pourriez-vous m'aider de nouveau ? Merci d'avance

    le 06/12/2017 à 00h12

  • mram

    mram Administrateur

    Bonjour, ligne 2 pas besoin de mettre .childNodes[3] . Et à la dernière ligne il faut utiliser les variables nouveau et ancien que vous avez créé auparavant. Car là vous ne les utilisez pas en fait.

    le 10/12/2017 à 14h02

  • yerem010

    yerem010

    Bonjour mon code fonctionne Pragraphe 4 et remplacer par Pragraphe 3 mais on m' affiche le message Avez-vous bien remplacé le contenu du paragraphe "p" dans le "div" ?

    le 21/12/2017 à 19h26

  • mram

    mram Administrateur

    Bonjour, la valeur 0 dans .childNodes[] n'est pas correcte. Il n'y a pas que les balises qui sont des noeuds HTML, mais aussi le texte contenu dedans ainsi que les attributs HTML

    le 23/12/2017 à 17h12

  • index_coding

    index_coding

    bonjour mon code ne fonctionne pas et je n'arrive pas nom plus à le faire en trois ligne. Le voici:

    le 01/09/2018 à 16h49

  • mram

    mram Administrateur

    Bonjour, que vous dit le message d'erreur ? Ca aidera pour trouver où ça coince.

    le 05/09/2018 à 07h08

  • x.jouclas

    x.jouclas

    Bonjour, je ne comprends pas mon erreur. Voici mon code: var nouveau = document.createTextNode("Paragraphe 3"); var dom = document.querySelector("div p"); var ancien = dom.childNodes(0); dom.replaceChild(nouveau, ancien);

    le 23/11/2017 à 17h13

  • mram

    mram Administrateur

    Bonjourn .childNodes[...] s'écrit avec des crochets et non des parenthèses. Et ce n'est pas le bon chiffre.

    le 26/11/2017 à 19h52

  • philgd28

    philgd28

    Bonjour, juste pour être sur, mon code est-il bon ? merci

    le 18/08/2017 à 12h00

  • mram

    mram Administrateur

    Bonjour, oui votre code est correct. Le ">" n'est pas nécessaire par contre.

    le 22/08/2017 à 12h49

  • Babeloued

    Babeloued

    Merci Mériam, c'est validé...

    le 13/12/2018 à 18h51

  • nkeshimanabrice-37

    nkeshimanabrice-37

    merci de votre aide mram...

    le 15/04/2019 à 15h11

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>