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
- MSDN: outerHTML Property