Propriété innerHTML de l'élément HTML DOM

Définition et utilisation

innerHTML Définit et utilise la propriété HTML content d'un élément DOM.

Voir également :

Propriété innerText

Propriété textContent

Exemple

Exemple 1

Obtenir le contenu HTML de l'élément avec id="myP" :

let html = document.getElementById("myP").innerHTML;

Essayez-le vous-même

Exemple 2

Modifier le contenu HTML de l'élément avec id="demo" :

document.getElementById("demo").innerHTML = "I have changed!";

Essayez-le vous-même

Exemple 3

Obtenir le contenu HTML de l'élément <ul> avec id="myList" :

let html = document.getElementById("myList").innerHTML;

Essayez-le vous-même

Exemple 4

Supprimer le contenu HTML de l'élément <p> avec id="demo" :

element.innerHTML = "";

Essayez-le vous-même

Exemple 5

Modifier le contenu HTML de deux éléments :

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

Essayez-le vous-même

Exemple 6

Répéter le contenu HTML de l'élément :

element.innerHTML += element.innerHTML;

Essayez-le vous-même

Exemple 7

Changer le contenu HTML et l'URL du lien :

element.innerHTML = "W3School";
element.href = "";

Essayez-le vous-même

Syntaxe

Retourner l'attribut innerHTML :

element.innerHTML

Définir l'attribut innerHTML :

element.innerHTML = text

Valeur de l'attribut

Valeur Description
Chaîne. Contenu HTML.

Valeur de retour

Type Description
Chaîne Le contenu HTML de l'élément.

Différences entre innerHTML, innerText et textContent

L'attribut innerText retourne :

Retourne uniquement le contenu texte des éléments et de tous leurs descendants, sans espaces de texte cachés CSS et balises, sauf pour les éléments <script> et <style>.

L'attribut innerHTML retourne :

Le contenu texte de l'élément, y compris tous les espaces et les balises HTML internes.

L'attribut textContent retourne :

Le contenu texte des éléments et de tous leurs descendants, avec des espaces et du texte caché CSS, mais sans balises.

Exemple HTML

<p id="myP">   Cet élément a de l'espace supplémentaire     et contient <span>un élément span</span>.</p>

Exemples JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Essayez-le vous-même

Dans l'exemple ci-dessus :

L'attribut innerText retourne :

Cet élément a de l'espace supplémentaire et contient un élément span.

L'attribut innerHTML retourne :

   Cet élément a de l'espace supplémentaire et contient <span>un élément span</span>.

L'attribut textContent retourne :

   Cet élément a de l'espace supplémentaire et contient un élément span.

Prise en charge du navigateur

Tous les navigateurs prennent en charge element.innerHTML：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support