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
|
---
title: ParentNode.append()
slug: Web/API/ParentNode/append
tags:
- API
- DOM
- Reference
translation_of: Web/API/ParentNode/append
---
<div>{{APIRef("DOM")}}</div>
<p>La méthode <strong><code>ParentNode.append</code></strong> insère un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} après le dernier enfant de <code>ParentNode</code>. Les objets {{domxref("DOMString")}} (c’est-à-dire les chaînes de caractères) sont insérés comme nœuds {{domxref("Text")}} équivalents.</p>
<p>Différences avec {{domxref("Node.appendChild()")}} :</p>
<ul>
<li><code>ParentNode.append()</code> vous permet également d’ajouter des objet {{domxref("DOMString")}}, tandis que <code>Node.appendChild()</code> accepte seulement les objets {{domxref("Node")}}.</li>
<li><code>ParentNode.append()</code> n’a pas de valeur de retour, tandis que <code>Node.appendChild()</code> retourne l’objet {{domxref("Node")}} ajouté.</li>
<li><code>ParentNode.append()</code> peut ajouter plusieurs nœuds et chaînes, alors que<code>Node.appendChild()</code> peut seulement ajouter un nœud.</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">[Throws, Unscopable]
void ParentNode.append((Node or DOMString)... nodes);
</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><code>nodes</code></dt>
<dd>Un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} à insérer.</dd>
</dl>
<h3 id="Exceptions">Exceptions</h3>
<ul>
<li>{{domxref("HierarchyRequestError")}} :<br>
Le nœud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
</ul>
<h2 id="Exemples">Exemples</h2>
<h3 id="Ajouter_un_élément">Ajouter un élément</h3>
<pre class="brush: js">var parent = document.createElement("div");
var p = document.createElement("p");
parent.append(p);
console.log(parent.childNodes); // NodeList [ <p> ]
</pre>
<h3 id="Ajouter_du_texte">Ajouter du texte</h3>
<pre class="brush: js">var parent = document.createElement("div");
parent.append("Du texte");
console.log(parent.textContent); // "Du texte"</pre>
<h3 id="Ajouter_un_élément_et_du_texte">Ajouter un élément et du texte</h3>
<pre class="brush: js">var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Du texte", p);
console.log(parent.childNodes); // NodeList [ #text "Du texte", <p> ]</pre>
<h3 id="ParentNode.append_est_unscopable"><code>ParentNode.append()</code> est <em>unscopable</em></h3>
<p>La méthode <code>append()</code> n’est pas accessible dans un bloc <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d’information.</p>
<pre class="brush: js">var parent = document.createElement("div");
with(parent) {
append("foo");
}
// ReferenceError: append is not defined </pre>
<h2 id="Polyfill">Polyfill</h2>
<p>Vous pouvez utiliser la méthode <code>append()</code> dans Internet Explorer 9 (et supérieur) avec le code suivant :</p>
<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('append')) {
return;
}
Object.defineProperty(item, 'append', {
configurable: true,
enumerable: true,
writable: true,
value: function append() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment();
argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
});
this.appendChild(docFrag);
}
});
});
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
<h2 id="Spécification">Spécification</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.ParentNode.append")}}</p>
<h2 id="Voir_également">Voir également</h2>
<ul>
<li>{{domxref("ParentNode")}} et {{domxref("ChildNode")}}</li>
<li>{{domxref("ParentNode.prepend()")}}</li>
<li>{{domxref("Node.appendChild()")}}</li>
<li>{{domxref("ChildNode.after()")}}</li>
<li>{{domxref("NodeList")}}</li>
</ul>
|
