blob: 2233bbd4199d6cace951991691eddabc611d3033 (
plain)
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
|
---
title: element.replaceChild
slug: Web/API/Node/replaceChild
tags:
- API
- DOM
- Enfant
- Méthodes
- Noeuds
- Remplacement
translation_of: Web/API/Node/replaceChild
---
<p>{{APIRef("DOM")}}</p>
<p>La méthode <strong><code>Node.replaceChild()</code></strong> remplace un nœud enfant du noeud spécifié par un autre nœud.</p>
<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
</pre>
<ul>
<li><code>newChild</code> est le nouveau nœud qui remplacera <code>oldChild</code>. S'il existe déjà dans le DOM, il sera d'abord enlevé.</li>
<li><code>oldChild</code> est le nœud existant à remplacer.</li>
<li><code>replaceNode</code> est le nœud remplacé. C'est le même nœud que <code>oldChild</code>.</li>
</ul>
<h2 id="Exemple" name="Exemple">Exemple</h2>
<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// <div></span>
<span class="comment token">// <span id="childSpan">foo bar</span></span>
<span class="comment token">// </div></span>
<span class="comment token">// crée un noeud élément vide</span>
<span class="comment token">// sans ID, aucun attribut ni contenu</span>
<span class="keyword token">var</span> sp1 <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">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// lui donne un attribut id appelé 'newSpan'</span>
sp1<span class="punctuation token">.</span>id <span class="operator token">=</span> <span class="string token">"newSpan"</span><span class="punctuation token">;</span>
<span class="comment token">// crée un contenu pour le nouvel élément.</span>
<span class="keyword token">var</span> sp1_content <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"new replacement span element."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// applique ce contenu au nouvel élément</span>
sp1<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>sp1_content<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// construit une référence au noeud existant devant être remplacé</span>
<span class="keyword token">var</span> sp2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childSpan"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> parentDiv <span class="operator token">=</span> sp2<span class="punctuation token">.</span>parentNode<span class="punctuation token">;</span>
<span class="comment token">// remplace le noeud existant sp2 avec le nouvel élément span sp1</span>
parentDiv<span class="punctuation token">.</span><span class="function token">replaceChild</span><span class="punctuation token">(</span>sp1<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// résultat :</span>
<span class="comment token">// <div></span>
<span class="comment token">// <span id="newSpan">nouvel élément span de remplacement.</span></span>
<span class="comment token">// </div></span></code></pre>
<div> </div>
<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
<ul>
<li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
<li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core : replaceChild</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-785887307">traduction en français</a> (non normative)</small></li>
<li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
</ul>
<p> </p>
<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>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Edge</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(1.0)}}</td>
<td>{{CompatGeckoDesktop(1)}}</td>
<td> IE6 (Maybe Earlier)</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatOpera(1.0)}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Edge Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile(1)}}</td>
<td>IE6 (Maybe Earlier)</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatOperaMobile(1.0)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatChrome(1.0)}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also" name="See_also">Voir aussi</h2>
<ul>
<li>{{domxref("Node.removeChild")}}</li>
</ul>
<p> </p>
|
