element.innerHTML

Résumé

innerHTML récupère ou définit tout le balisage et le contenu au sein d'un élément donné.

Syntaxe

var balisage = element.innerHTML;
element.innerHTML = balisage;

balisage est une chaîne contenant le contenu de l'élément (y compris ses sous-éléments) au format HTML brut, par exemple : <p>Du texte</p>.

Exemple

// HTML:
// <div id="d"><p>Contenu</p>
// <p>Développé en détail</p>
// </div>

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

// la chaîne "<p>Contenu</p><p>Développé en détail</p>" 
// est affichée dans la fenêtre de la console

Notes

Bien que ne faisant pas partie de la spécification W3C DOM, 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ément, dont BODY ou HTML, peut à la fois être récupérée et remplacée. Elle peut être 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;

Comme il n'y a pas de spécification publique pour cette propriété, les implémentations peuvent être assez différentes. Par exemple, lorsque du texte est introduit dans un champ de type text, Internet Explorer modifiera la valeur de la propriété innerHTML de l'élément input tandis que les navigateurs utilisant Gecko ne le feront pas.

Elle ne devrait jamais être utilisée pour écrire des parties de tableaux, les méthodes W3C DOM devant être utilisées à la place, mais elle peut cependant servir à écrire un tableau entier ou le contenu d'une cellule.

Spécification

Références

MSDN: innerHTML Property