Exercice 1/4

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/4

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

  • djalloh2016-72

    pour infos n'oubliez pas ici de declarer une variable qui sera le file conducteur de tout le code et aussi utiliser .querySelector() et le last-child ici spécifier le dernier du div...très important ça je l'ai déjà dans la librairie "JQuery" pour ceux qui savent de quoi je parle et qu'ils voudraient faire le web leur gagne pain...write less,do more

  • philgd28

    bonsoir, le code fonctionne des deux façon avec Bracket, mais chez vous non, y a t'il une erreur quelque part ? merci

  • 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

  • mram Administrateur

    Il faudrait plutôt faire "contenu.innerHTML = ..." à la ligne 2.

44 Commentaires

  • djalloh2016-72

    djalloh2016-72

    pour infos n'oubliez pas ici de declarer une variable qui sera le file conducteur de tout le code et aussi utiliser .querySelector() et le last-child ici spécifier le dernier du div...très important ça je l'ai déjà dans la librairie "JQuery" pour ceux qui savent de quoi je parle et qu'ils voudraient faire le web leur gagne pain...write less,do more

    le 28/02/2018 à 23h53

  • philgd28

    philgd28

    bonsoir, le code fonctionne des deux façon avec Bracket, mais chez vous non, y a t'il une erreur quelque part ? merci

    le 12/08/2017 à 21h30

  • mram

    mram Administrateur

    Bonjour, votre code est correct. On va revoir la correction automatique ici aussi car votre code devrait passer.

    le 16/08/2017 à 14h56

  • 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

  • mram

    mram Administrateur

    Il faudrait plutôt faire "contenu.innerHTML = ..." à la ligne 2.

    le 01/04/2017 à 10h59

  • mram

    mram Administrateur

    Avec querySelector(), et non pas besoin d'utiliser position length.

    le 20/10/2016 à 13h24

  • 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

  • egravouil

    egravouil

    Bonjour, j'ai le message suivant : Reference Error : Div is not defined. Pourriez-vous nous apporter un éclairage sur la correction de cet exemple svp ? Je ne saisi pas ce que vous entendez par (texte + balises) dans : element.innerHTML = "Nouveau contenu HTML (texte + balises)"; ? Quel est l'intérêt d'écrire deux fois le texte ? & quelles balises sont à spécifier ? Merci.

    le 21/09/2016 à 14h53

  • 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

  • egravouil

    egravouil

    Autant pour moi, j'ai trouvé mon erreur grâce à l'exercice suivant. Toutefois, je trouve que le (texte + balise) induit en erreur alors que element.innerHTML = "Nouveau contenu HTML"; suffit.

    le 21/09/2016 à 15h19

  • mram

    mram Administrateur

    ça sert dans pas mal de situations, exemple : quand vous remplissez un formulaire et selon ce que vous cochez, d'autres parties du formulaire s'affichent. C'est fait avec Javascript.

    le 07/06/2017 à 13h46

  • Timo

    Timo

    Pareil ici, l'élément 'P' ne possède pas le bon contenu. Un indice ?

    le 21/09/2016 à 20h48

  • mram

    mram Administrateur

    .innerHTML sert à mettre uniquement du texte dans des balises, pourquoi rajouter les balises <p> en plus ??

    le 21/09/2016 à 21h22

  • pascal-ds

    pascal-ds

    je suis d'accord avec egravouil : mettre (texte+balise) dans la description induit en erreur. On ne comprend pas ce que cela signifie. S'il s'agit d'une explication, du style "le nouveau contenu HTML peut comporte du texte et des balises, il vaudrait mieux le préciser séparement. De même, il n'est pas évident de capter du premier coup que "element" est une partie à modifier et ne fait pas partie du texte de l'instruction. Remarques faites après m'être pas mal gratté la tête sur le sujet :o)...

    le 13/10/2016 à 10h09

  • bsmeyers84

    bsmeyers84

    modification faite toujours le même message: "L'ÉLÉMENT P NE POSSÈDE PAS LE BON CONTENU."

    le 22/09/2016 à 17h41

  • mram

    mram Administrateur

    Vous ne récupérez aucun élément HTML dans votre code, revoyez les exercices qui aborde cette notion.

    le 22/09/2016 à 23h50

  • bsmeyers84

    bsmeyers84

    j'ai un peu de mal comprendre cet exercice je viens de modifié mon code et j'ai toujours le même message:"L'ÉLÉMENT P NE POSSÈDE PAS LE BON CONTENU."

    le 23/09/2016 à 15h47

  • cdezandee

    cdezandee

    var par = document.querySelector('p.last-child'); par.innerHTML = "Dernier paragraphe";

    le 15/11/2016 à 15h49

  • mram

    mram Administrateur

    Vous n'avez pas besoin de déclarer de variable "para" ce n'est pas demandé. La 1ère ligne est correct mais pas le reste.

    le 28/09/2016 à 20h36

  • mram

    mram Administrateur

    Ligne 1, votre sélecteur CSS n'est pas bon. C'est "p:last-child" avec ":" et non "."

    le 16/11/2016 à 20h01

  • bsmeyers84

    bsmeyers84

    L'ÉLÉMENT P NE POSSÈDE PAS LE BON CONTENU.

    le 13/09/2016 à 15h42

  • foucvb

    foucvb

    Je bloque. Impossible de comprendre comment faire. Les instructions ne sont pas très claires. Merci

    le 15/11/2017 à 11h35

  • foucvb

    foucvb

    Autant pour moi. J'ai trouvé. Il faut remplacé "element" par la variable :

    le 15/11/2017 à 11h43

  • mram

    mram Administrateur

    Bonjour, oui il faut adapter le code de l'énoncé, qui est juste un exemple théorique, à l'exercice en lui-même.

    le 16/11/2017 à 18h39

  • mram

    mram Administrateur

    Tout dépend du nom que vous donnez à vos variables.

    le 16/11/2017 à 18h39

  • alexismoquet

    alexismoquet

    idem

    le 02/10/2017 à 13h24

  • mram

    mram Administrateur

    Bonjour, vous oubliez d'utiliser querySelector() ...

    le 03/10/2017 à 22h10

  • rom1.dev.web

    rom1.dev.web

    le code est-il bon : var modif = document.querySelector('div > p'); element.innerHTML = "Dernier paragraphe"; modif = element.innerHTML;

    le 23/08/2017 à 16h42

  • mram

    mram Administrateur

    Oui il est bon. Le souci sur les exercices DOM a été corrigé aujourd'hui, donc ça devrait passer maintenant.

    le 24/08/2017 à 22h57

  • rom1.dev.web

    rom1.dev.web

    ou alors ça : var modif = document.querySelector('div > p'); modif.element.innerHTML = "Dernier paragraphe"; Entre les bugs de corrections et les explications approximatives.Je crois que je vais zapper la partie DOM.

    le 23/08/2017 à 17h26

  • mram

    mram Administrateur

    Non ne zappez pas cette partie, vos codes sont plutôt bons. On a corrigé le souci sur tous les exercices DOM aujourd'hui.

    le 24/08/2017 à 22h58

  • titi-fernandes

    titi-fernandes

    Pouvez vous me dire ce qui ne va pas dans mon code? l'erreur me met L'élément p ne possède pas le bon contenu?

    le 25/09/2017 à 13h35

  • mram

    mram Administrateur

    Bonjour, le souci est que vous utilisiez une variable "element" qui n'existe pas.

    le 29/09/2017 à 00h24

  • charlotte.pupet34-92

    charlotte.pupet34-92

    code :var result = querySelector("div > p:last-child"); result.innerHTML = "Dernier HTML"; et j'ai comme erreur : querySelector is not defined

    le 26/03/2018 à 10h18

  • mram

    mram Administrateur

    Bonjour, et oui .querySelector() est une fonction qui s'applique à l'objet Document.

    le 30/03/2018 à 01h41

  • nathalie.chenparis

    nathalie.chenparis

    Bonjour, je ne ois pas ou est mon erreur: var modif = document.querySelector('p: last-child'); modif.innertHTML = "Dernier paragraphe";

    le 22/05/2018 à 11h14

  • mram

    mram Administrateur

    Bonjour, "p: last-child" ne fonctionnera pas si vous ne collez les pas le pseudo sélecteur au sélecteur de balise.

    le 28/05/2018 à 04h08

  • nkeshimanabrice-37

    nkeshimanabrice-37

    l'exercice n'est pas comprehensible...

    le 17/01/2019 à 15h54

  • meriam

    meriam Administrateur

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

    le 18/01/2019 à 09h51

  • belespoir38

    belespoir38

    Comment fait-on pour avoir le DERNIER p ? car en cherchant des infos ''div>p" selectionne TOUS les p enfant de div et ne récupère que le 1er élément html. Aussi, lorsque j'écris modif=element.innerHTML, c'est dans html que je remplace le texte "dernier paragraphe" par un autre ?

    le 14/01/2018 à 15h40

  • mram

    mram Administrateur

    Bonjour, vous faites une étape en trop, le code tient en deux lignes (deux étapes). La dernière ligne est inutile.

    le 17/01/2018 à 19h31

  • jwagret

    jwagret

    C'est pas clair la leçon...

    le 27/08/2017 à 13h52

  • mram

    mram Administrateur

    Bonjour qu'est-ce que vous n'avez pas compris ?

    le 30/08/2017 à 13h55

  • mram

    mram Administrateur

    Votre code est correct pourtant...

    le 30/08/2017 à 13h55

  • veronique.nollet

    veronique.nollet

    Bonjour, j'ai le message suivant : element is not defined. var modif = document.querySelector("p:last-child"); element.innerHTML = "Dernier paragraphe"; modif = element.innerHTML; ??

    le 09/05/2018 à 17h48

  • mram

    mram Administrateur

    Bonjour, la 3eme ligne est inutile. Ensuite ligne 2 vous utilisez la variable "element" mais vous ne la déclarez pas auparavant.

    le 14/05/2018 à 03h04

  • mram

    mram Administrateur

    D'ailleurs pas besoin de cette variable ligne 2, mais il faudrait plutôt utiliser la variable que vous déclarez ligne 1.

    le 14/05/2018 à 03h05

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

    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

  • philgd28

    philgd28

    merci

    le 18/08/2017 à 10h50

  • 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

  • khd69-20

    khd69-20

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

    le 03/08/2018 à 02h51

  • manu_07130

    manu_07130

    Dans la leçon, il est possible de récupérer le contenu HTML avec .innerHTML, pourquoi ne le fait-on pas ici ?

    le 12/02/2018 à 13h15

  • mram

    mram Administrateur

    Bonjour, je comprends pas trop votre question. Car c'est exactement ce qu'on demande de faire en fait.

    le 12/02/2018 à 22h18

  • nkeshimanabrice-37

    nkeshimanabrice-37

    merci meriam...

    le 18/03/2019 à 17h17