files/fr/web/api/element/outerhtml/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

---
title: Element.outerHTML
slug: Web/API/Element/outerHTML
tags:
  - API
  - DOM
  - Privacy
  - Propriétés
translation_of: Web/API/Element/outerHTML
---
<div>{{APIRef("DOM")}}</div>

<p>L'attribut <code>outerHTML</code> de l'interface DOM {{domxref("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.</p>

<p>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é {{domxref ("Element.innerHTML", "innerHTML")}}.</p>

<h2 id="Syntax" name="Syntax">Syntaxe</h2>

<pre class="eval line-numbers  language-html"><code class="language-html">var content = element.outerHTML;

element.outerHTML = htmlString;</code></pre>

<h3 class="highlight-spanned" id="Valeur"><span class="highlight-span">Valeur</span></h3>

<p>La lecture de la valeur de <code>outerHTML</code> renvoie une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de <code>innerHTML</code> supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne <code>htmlString</code>.</p>

<h3 class="highlight-spanned" id="Exceptions"><span class="highlight-span">Exceptions</span></h3>

<dl>
 <dt><code>SyntaxError</code></dt>
 <dd>Une tentative a été faite de définir la valeur de <code>outerHTML</code> en utilisant une chaîne qui n'est pas correctement formée HTML.</dd>
 <dt><code>NoModificationAllowedError</code></dt>
 <dd>Une tentative a été faite de définir  <code>outerHTML</code>  sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.</dd>
</dl>

<h2 id="Examples" name="Examples">Exemples</h2>

<p>Récupérer la valeur de la propriété <code>outerHTML</code> d'un élément :</p>

<pre class="brush: js">// HTML:
// &lt;div id="d"&gt;&lt;p&gt;Contenu&lt;/p&gt;&lt;p&gt;Plus Complexe&lt;/p&gt;&lt;/div&gt;

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

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

<p>Remplacer un noeud en modifiant la propriété <code>outerHTML</code> :</p>

<pre class="brush: js">// HTML:
// &lt;div id="container"&gt;&lt;div id="d"&gt;Ceci est un div.&lt;/div&gt;&lt;/div&gt;

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

d.outerHTML = "&lt;p&gt;Ce paragraphe remplace le div original.&lt;/p&gt;";
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é.
</pre>

<h2 id="Notes">Notes</h2>

<p>Si un élément n'a pas de noeud parent, définir sa propriété <code>outerHTML</code> ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
div<span class="punctuation token">.</span>outerHTML <span class="operator token">=</span> <span class="string token">"&lt;div class=\"test\"&gt;test&lt;/div&gt;"</span><span class="punctuation token">;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// output: "&lt;div&gt;&lt;/div&gt;"</span></code></pre>

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

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

<h2 id="Specification" name="Specification">Spécification</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
   <td>{{ Spec2('DOM Parsing') }}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatGeckoDesktop("11") }}</td>
   <td>0.2</td>
   <td>4.0</td>
   <td>7</td>
   <td>1.3</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatGeckoMobile("11") }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>Sérialisation de l'arborescence DOM en XML ou HTML : {{domxref("XMLSerializer")}}</li>
 <li>Analyse XML ou HTML dans l'arborescence DOM : {{domxref("DOMParser")}}</li>
 <li>{{domxref("HTMLElement.outerText")}}</li>
</ul>