Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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

Spécification Statut Commentaire
DOM Parsing and Serialization
La définition de 'Element.outerHTML' dans cette spécification.
Living Standard  

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 11 (11) 0.2 4.0 7 1.3
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Oui) 11.0 (11) (Oui) (Oui) (Oui)

See also

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : fscholz, scaillerie
 Dernière mise à jour par : scaillerie,