Exercice 1/7

Dans le fichier script.js :

  • récupérez le dernier p contenu dans le div;
  • modifiez son contenu par "Dernier paragraphe";
  • cliquez sur Soumettre ma réponse.

Leçon 1/7

Il est possible de récupérer ou de modifier le contenu d'un élément HTML avec la propriété innerHTML.

Récupérer le contenu HTML

var contenu = element.innerHTML;

Modifier le contenu HTML

element.innerHTML = "Nouveau contenu HTML (texte + balises)";

Commentaires les mieux notés

  • nkeshimanabrice-37

    nkeshimanabrice-37

    merci meriam...

    le 18/03/2019 à 17h17

  • takfa

    takfa

    pr ceux qui galérent var recup = document.querySelector('div > p'); recup.innerHTML ="Dernier paragraphe";

    le 22/11/2019 à 21h54

  • yentrang.huynh

    yentrang.huynh

    Bonjour, je ne vois pas mon erreur. Quand je teste mon code avec alert(); , j'affiche bien un paragraphe modifié avec "Dernier paragraphe" mais quand je soumets l'exercice j'ai le message "l'élément 'P' ne possède pas le bon contenu"

    le 27/03/2017 à 11h27

  • patricerameaux

    patricerameaux

    je ne vois absolument pas comment récupérer le dernier <p> de <div> : en utilisant la position length -1 ? mais avec quelle syntaxe dans "var contenu = quelquechose.innerHTML ? je suis perdu aidez-moi svp

    le 20/10/2016 à 11h00

  • jovidal

    jovidal

    A quoi ça sert de modifier un contenu HTML avec du JavaScript ? Pourquoi ne pas changer directement le HTML ?? Besoin d'exemple concret :o

    le 06/06/2017 à 14h12

20 Commentaires

  • mimouni.a-13

    mimouni.a-13

    impossible de trouver ce code avec l'énoncé de cer exercice

    le 16/07/2020 à 16h07

  • meriam

    meriam Admin

    Votre code est correct.

    le 17/07/2020 à 11h10

  • rio.mathieu20-43

    rio.mathieu20-43

    Pour ce qui veulent la reponse : var div = document.querySelector('div > p'); div.innerHTML = "Dernier paragraphe";

    le 13/05/2020 à 22h22

  • andrea.ella-35

    andrea.ella-35

    bonjour je ne comprends pas mon erreur

    le 17/04/2020 à 17h06

  • meriam

    meriam Admin

    La méthode est querySelector et non pas query.Selector.

    le 18/04/2020 à 00h54

  • rayan.melon-20

    rayan.melon-20

    ca ne marche pas

    le 18/02/2020 à 13h31

  • meriam

    meriam Admin

    Bonjour, il suffit d'écrire modif.innerHTML = "Dernier paragraphe";

    le 18/02/2020 à 14h35

  • takfa

    takfa

    pr ceux qui galérent var recup = document.querySelector('div > p'); recup.innerHTML ="Dernier paragraphe";

    le 22/11/2019 à 21h54

  • nadiros-99

    nadiros-99

    var contenu=document.querySelector("div>p"); contenu.innerHTML="Dernier paragraphe"; Je doute que la leçon telle que rédigée soit assez claire pour arriver à ce résultat de code qui fonctionne. Il est notamment dit ds la leçon qu'on récupère du css avec la propriété inner alors qu'il faut utiliser querySelector vu précédemment. Il est certes utile de nous faire réfléchir. Le problème c'est qu'on risque d'aller sur d'autres sites pour mieux saisir la difficulté et si les choses y sont mieux expliquées, on risque de ne plus jamais revenir. Merci tout de même pour la gratuité du service.

    le 28/08/2019 à 14h30

  • meriam

    meriam Admin

    Bonjour, changer la variable contenu par p,

    le 28/08/2019 à 17h32

  • nkeshimanabrice-37

    nkeshimanabrice-37

    merci meriam...

    le 18/03/2019 à 17h17

  • nkeshimanabrice-37

    nkeshimanabrice-37

    l'exercice n'est pas comprehensible...

    le 17/01/2019 à 15h54

  • meriam

    meriam Admin

    récupérez le dernier p contenu dans le div; var p = querySelector("div > p"); p.innerHTML = "Dernier paragraphe";

    le 18/01/2019 à 09h51

  • khd69-20

    khd69-20

    Ok j ai trouvé le "t" en trop a la fin de inner dans innerHTML.

    le 03/08/2018 à 02h51

  • khd69-20

    khd69-20

    bonjour je vois pas mon erreur (L'élément p ne possède pas le bon contenu.) Voici mon code : var contenu = document.querySelector("p:last-child"); contenu.innertHTML = "Dernier paragraphe";

    le 03/08/2018 à 02h22

  • nathalie.chenparis

    nathalie.chenparis

    Bonjour, sinon j'ai testé ca me met erreur qui est "The string "div > p: last child", is not a valid CSS selector" : var modif = document.querySelectorAll ("div > p: last child"); modif.innertHTML = "Dernier paragraphe";

    le 23/05/2018 à 12h02

  • mram

    mram Admin

    Bonjour, et bien oui votre sélecteur n'est pas écrit correctement. Revoyez l'exercice qui aborde les pseudo-éléments CSS.

    le 28/05/2018 à 04h16

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>