Remplacer un élément HTML

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

144 Commentaires

derhen04-70

Bonjour pourquoi mon code ne marche pas ?

le 23/03/2023 à 15h52
Patricio M Admin

p.replaceChild(nouveau, ancien[0]);

le 27/03/2023 à 11h53
hadjerbenhadid86-74

bonjour, aidez moi svp

le 18/03/2023 à 10h15
Patricio M Admin

Ton code fonctionne très bien!

le 20/03/2023 à 09h21
hgadessaud-13

Bonjour je ne trouve pas mon erreur Vous devez modifier le contenu du paragraphe de la div par Paragraphe 3" ! Merci

le 03/03/2023 à 19h06
Patricio M Admin

childNode sans l'index... et tu l'écris à la fin, lorsque tu appelles ancien

le 06/03/2023 à 07h55
po.mpolesha-10

Bonjour, petite remarque je me pose la question de pourquoi dans la leçon de l'exercice 3 pour la propriété .childNode il apparaît des parenthèses. En effet elles ne le sont pas dans la leçon exercice 2. C'est elles-mêmes qui m'ont induit en erreur dans mon code au début hehe.

le 03/02/2022 à 16h29
meriam Admin

Bonjour, childNodes s'écrit avec parenthèses pour recevoir un paramètre.

le 03/02/2022 à 23h37
meriam Admin

pour l'exercice 2, la leçon explique l'utilité de la fonction childNode,

le 03/02/2022 à 23h39
nc3107-16

Bonjour Meriam. Il me semble , après des recherches, que pour le dernier exercice childNodes renvoie un tableau. Cela fait var ancien = p.childNodes; et c'est ensuite qu'on extrait l'index 0 du tableau avec p.replaceChild(nouveau, ancien[0]). Qu'en pensez-vous ? Merci.;

le 03/12/2021 à 22h41
meriam Admin

Bonjour, oui c'est logique .

le 08/12/2021 à 12h27
nc3107-16

Bonjour Meriam. Je viens de finir le dernier exercice de JavaScript. Il me semble que mon code est bon. Aurai-je commis une erreur ? Le message d'erreur est "Vous devez modifier le contenu du paragraphe de la div par Paragraphe 3". Merci.

le 03/12/2021 à 00h53
meriam Admin

Bonjour, il faut changer l'indice de la fonction childNodes[0] au lieu var ancien = p.childNodes[O]; (Vous avez écrit la lettre O au lieu d'écrire 0(zéro))

le 06/12/2021 à 11h02
gracia.nicolas-10

Bonjour meriam, je débute en code j'avou ne pas avoir toujours compris se que je coder dans les exercices mais je compte néanmoins consolider les notions aborder pendant ces jours de codage. Neamoins savez-vous quels exercices ne fonctionnement pas ? j'ai le souci avec pas mal d'exo mais comme je comprend pas toujours se que j'ecrit c'est peu etre du fait de mes codes...

le 26/11/2021 à 19h08
meriam Admin

Bonjour, c'est un bug qui va être résolu . Merci pour votre compréhension.

le 29/11/2021 à 00h10
kaiss94-31

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

le 26/11/2021 à 18h24
meriam Admin

Bonjour, c'est un bug qui va être résolu . Merci pour votre compréhension.

le 29/11/2021 à 00h10
RAHIM Adel

je vois que le code prend beaucoup de temps pour se faire valider mais cette méthode m'aggrave vraiment les règles et je les connait par coeur

le 01/11/2021 à 00h56
meriam Admin

Bonjour, ce code peut vous aider :var div=document.querySelector("div") var p=div.querySelector("p") var nouveau=document.createTextNode("Paragraphe 3") var ancien= p.childNodes[0] p.replaceChild(nouveau,ancien)

le 08/11/2021 à 00h32
Lea.B

Bonjour, Je me suis inscrite pour la prochaine session de formation, vous m’avez envoyé un mail précisant que pour compléter ma candidature il ne me manque plus qu’à terminer les exercices de la plateforme « Apprendre HTML ». Il m’est impossible d’accéder à certains exercices les pages ne chargent pas. Je ne peux même pas vous le signaler dans les commentaires des pages concernées car elles ne répondent pas (et j’ai essayé avec plusieurs ordinateurs). Cela fait deux jours que j’appelle au 01.75.43.42.42 afin de résoudre le problème aussi bien pour la fin de mon parcours que pour l’optimisation de votre plateforme mais sans aucune solution proposée. Une première personne m’a demandé d’envoyer un mail à une certaine adresse et une deuxième m’a dit qu’on me rappellerait et je n’ai jamais eu de retour. A ce jour, j’ai terminé tous les exercices qui me sont accessibles, je ne peux donc pas terminer le reste des exercices car ils ne fonctionnent pas soit : Les Boucles en JavaScript : exercices 0, 2, 3, 4, 5 puis Les tableaux et les objets en JavaScript : exercice 19 « Afficher les propriétés d’un tableau ordonné ». Est-il possible d’avoir une réponse et une solution s’il vous plaît ?

le 29/10/2021 à 17h47
meriam Admin

Bonjour, vous pouvez me contacter par mail en envoyant les liens des exercices bloqués

le 07/11/2021 à 23h17
Lea.B

Bonjour,

le 29/10/2021 à 17h30
meriam Admin

Bonjour, est ce que vous avez résolu le problème?

le 07/11/2021 à 23h26
bilismira-75

Bonjour, j'aimerai savoir quoi faire après la fin des exercices pour la suite de la formation?

le 13/08/2021 à 12h54
meriam Admin

Bonjour, vous pouvez s'inscrire à la formation de 3wAcademy

le 30/08/2021 à 01h08
derjacko

echoue pleure relève toi lève la tête et recommence jusqu'à ce que tu trouve la solution courage a tous

le 06/05/2021 à 17h14
meriam Admin

Bonjour, votre code est correct.

le 07/05/2021 à 12h01
Antoine de Pertat

var p = document.querySelector("div > p") p.textContent = "Paragraphe 3"

le 24/04/2021 à 13h24
meriam Admin

Bonjour, votre dernier code est correct.

le 28/04/2021 à 10h59
Antoine de Pertat

Bonjour, méthode différente mais validée :

le 24/04/2021 à 13h24

Pour publier un commentaire, vous devez vous connecter.

script.js

index.html

<!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>

Activer JavaScriptJavaScriptJS

http://localhost:8080