Element.outerHTML

Résumé

L'attribut outerHTML de l'interface DOM element récupère le fragment HTML sérialisé décrivant l'élément ainsi que ses descendants. Il peut être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.

Syntaxe

var content = element.outerHTML;

content renvoie comme valeur de retour le fragment HTML sérialisé décrivant element et ses descendants.

element.outerHTML = content;

Remplace l'élément element par les noeuds générés par le parsing de la chaîne content avec le parent de element en tant que contexte pour l'algorithme de génération du fragment HTML.

Exemples

Récupérer la valeur de la propriété outerHTML d'un élément :

// HTML:
// <div id="d"><p>Contenu</p><p>Plus Complexe</p></div>

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

// la chaîne '<div id="d"><p>Contenu</p><p>Plus Complexe</p></div>'
// est affichée dans la fenêtre console

Remplacer un noeud en modifiant la propriété outerHTML :

// HTML:
// <div id="container"><div id="d">Ceci est un div.</div></div>

container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // affiche "DIV"

d.outerHTML = "<p>Ce paragraphe remplace le div original.</p>";
console.log(container.firstChild.nodeName); // affiche "P"

// Le div #d ne fait plus partie de l'arbre décrivant le document,
// le nouveau paragraphe l'ayant remplacé.

Notes

Si un élément n'a pas de noeud parent, c'est-à-dire s'il s'agit du noeud racine du document, modifier sa propriété outerHTML provoquera une exception DOMException avec le code d'erreur NO_MODIFICATION_ALLOWED_ERR. Par exemple:

document.documentElement.outerHTML = "test";  // génère une exception DOMException

Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété outerHTML a été modifiée contiendra toujours une référence à l'élément initial :

var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // affiche: "P"
p.outerHTML = "<div>Ce div remplace un paragraph.</div>";
console.log(p.nodeName); // toujours "P";

Spécification

Browser compatibility

See also

• MSDN: outerHTML Property