We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 aussi être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.

Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété innerHTML.

Syntaxe

var content = element.outerHTML;

element.outerHTML = htmlString;

Valeur

La lecture de la valeur de outerHTML renvoie une  DOMString contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de innerHTML supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne htmlString.

Exceptions

SyntaxError
Une tentative a été faite de définir la valeur de outerHTML en utilisant une chaîne qui n'est pas correctement formée HTML.
NoModificationAllowedError
Une tentative a été faite de définir  outerHTML  sur un élément qui est enfant direct du Document, tel que Document.documentElement.

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, définir sa propriété outerHTML ne le modifiera pas, ni ses descendants. Ne nombreux navigateurs déclencheront aussi une exception. Par exemple :

var div = document.createElement("div");
div.outerHTML = "<div class=\"test\">test</div>";
console.log(div.outerHTML); // output: "<div></div>"

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.
Version de travail  

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

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

Voir aussi

Étiquettes et contributeurs liés au document

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