La propriété Element.innerHTML récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.

Note: Si un nœud <div>, <span>, ou <noembed> a un sous-nœud de type texte contenant les caractères (&), (<), ou (>), innerHTML renverra à la place les chaînes suivantes : &amp;, &lt; et &gt; respectivement. Utilisez Node.textContent pour obtenir une copie exacte du contenu de ces nœuds.

Syntaxe

const content = element.innerHTML;

En retour, content contient le code HTML sérialisé décrivant tous les descendants de l'élément.

element.innerHTML = content;

Supprime tous les enfants de l'élément, analyse la chaîne content et affecte les noeuds résultants comme enfants de l'élément.

Exemple

<html>
  <head></head>
  <body>
    <div id="txt">
      <script     id="txt0"> x=0> </script>
        <noembed    id="txt1"> 1   </noembed>
        <noframes   id="txt2"> 2   </noframes>
        <noscript   id="txt3"> 3   </noscript>
        <div        id="txt4"> 4   </div>
        <div>
          <noscript id="txt5"> 5   </noscript>
        </div>
        <span       id="txt6"> 6   </span>
      </div>

      <div id="innerHTMLtxt"></div>
    <div id="textContenttxt"><div>

    <script> 
    for (let i = 0; i < 7; i++) { 
      x = "txt" + i;
      document.getElementById(x).firstChild.nodeValue = '&<>'
    }

    document.getElementById("innerHTMLtxt").textContent =
        document.getElementById("txt").innerHTML
    document.getElementById("textContenttxt").textContent =
        document.getElementById("txt").textContent
    </script>
  <body>
</html>
// HTML:
// <div id="d"><p>Contenu</p>
// <p>En outre élaboré</p>
// </div>

const d = document.getElementById("d");
dump(d.innerHTML);

// la chaîne de caractères "<p>Contenu</p><p>En outre élaboré</p>"
// est envoyée vers la fenêtre de la console

Notes

Cette propriété fournit une manière simple de remplacer complètement le contenu d'un élément. Par exemple, le contenu entier de l'élément body peut être effacé par :

document.body.innerHTML = "";  // Remplace le contenu de body par une chaîne vide.

La propriété innerHTML de beaucoup de types d'éléments, dont <body> ou <html>, peut être récupérée ou remplacée. Elle peut être aussi utilisée pour afficher le code source d'une page qui a été modifiée dynamiquement :

// Copiez et collez ceci dans la barre d'adresse en une seule ligne
javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;

Cette propriété a été initialement implémentée par des navigateurs web, puis spécifiée par le WHATWG et le W3C en HTML5. Les implémentations anciennes ne peuvent pas la prendre en charge exactement de la même manière. Par exemple, lorsque du texte est introduit dans un champ de type text multiligne (élément  textarea), Internet Explorer modifie la valeur de l'attribut de la propriété innerHTML de l'élément textarea, tandis que les navigateurs utilisant Gecko ne le font pas.

Considérations de sécurité

Il n'est pas rare de voir innerHTML utilisé pour insérer du texte dans une page web. Cela pose un risque de sécurité.

const name = "John";
// supposons 'el' est un élément DOM HTML
el.innerHTML = name; // inoffensif dans ce cas
// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

Bien que cela puisse ressembler à une attaque Cross-site_scripting, le résultat est inoffensif. HTML5 spécifie qu'une balise <script> insérée via innerHTML ne doit pas s'exécuter.

Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments <script>, donc il existe toujours un risque de sécurité chaque fois que vous utilisez innerHTML pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

Pour cette raison, il est recommandé de ne pas utiliser innerHTML pour l'insertion de texte brut ; à la place, utilisez node.textContent. Il n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.

Spécification

Spécification Statut Commentaire
DOM Parsing and Serialization
La définition de 'Element.innerHTML' dans cette spécification.
Version de travail Définition initiale.

Voir aussi

  • innerDOM - Pour ceux qui souhaitent adhérer aux standards, voici un ensemble de fonctions JavaScript offrant de sérialiser ou d'analyser le XML pour définir le contenu de l'élément défini comme chaîne(s) via le DOM ou obtenir le contenu de l'élément obtenu du DOM sous forme de chaîne.
  • Element.insertAdjacentHTML - Une alternative pour innerHTML, vous permettant d'ajouter le nouveau HTML, au lieu de le remplacer.
  • jssaxparser - Une solution plus robuste (mais plus lourde) que innerDOM (prend en charge l'analyse des espaces de noms, des attributs à guillemets simples, des sections CDATA, etc.) est cet analyseur SAX2 lorsqu'il est utilisé avec son gestionnaire de contenu DOM. (Offre une chaîne à DOM ; DOM à chaîne est significativement plus simple)
  • Considération d'efficience : Sur quirksmode
  • MSDN: innerHTML Property

Étiquettes et contributeurs liés au document

Étiquettes : 
 Dernière mise à jour par : loella16,