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.prepend()
slug: Web/API/ParentNode/prepend
tags:
- API
- DOM
- Méthodes
- Noeuds
- parent
translation_of: Web/API/ParentNode/prepend
---
<div>{{APIRef("DOM")}}</div>
<p>La méthode <strong><code>ParentNode.prepend</code></strong> insère un jeu d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>) avant le premier enfant de <code>ParentNode</code>. Les objets {{domxref("DOMString")}} sont insérés comme équivalant des noeuds {{domxref("Text")}}.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox"><em>ParentNode</em>.prepend(<em>nodesToPrepend</em>);
</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><code>nodesToPrepend</code></dt>
<dd>Un noeud ou plus à insérer avant le premier noeud enfant dans le <code>ParentNode</code> courant. Chaque noeud peut être spécifié comme un objet {{domxref("Node")}} ou comme une chaîne de caractères ; les chaînes sont insérées comme de nouveaux noeuds {{domxref("Text")}}.</dd>
</dl>
<h3 id="Valeur_retournée">Valeur retournée</h3>
<p><code>undefined</code> (<em>indéfini</em>).</p>
<h3 id="Exceptions">Exceptions</h3>
<ul>
<li>{{domxref("HierarchyRequestError")}} : Le noeud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
</ul>
<h2 id="Exemples">Exemples</h2>
<h3 id="Ajout_dun_élément">Ajout d'un élément</h3>
<pre class="brush: js">var parent = document.createElement("div");
var p = document.createElement("p");
var span = document.createElement("span");
parent.append(p);
parent.prepend(span);
console.log(parent.childNodes); // NodeList [ <span>, <p> ]
</pre>
<h3 id="Ajout_dun_texte">Ajout d'un texte</h3>
<pre class="brush: js">var parent = document.createElement("div");
parent.append("Some text");
parent.prepend("Headline: ");
console.log(parent.textContent); // "Headline: Some text"</pre>
<h3 id="Ajout_dun_élément_et_dun_texte">Ajout d'un élément et d'un texte</h3>
<pre class="brush: js">var parent = document.createElement("div");
var p = document.createElement("p");
parent.prepend("Some text", p);
console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre>
<h3 id="ParentNode.prepend_est_non_accessible"><code>ParentNode.prepend()</code> est non accessible</h3>
<p>La méthode <code>prepend()</code> n'est pas comprise dans l'instruction <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
<pre class="brush: js">var parent = document.createElement("div");
with(parent) {
prepend("foo");
}
// ReferenceError: prepend is not defined (<em>prepend n'est pas défini</em>)</pre>
<h2 id="Polyfill">Polyfill</h2>
<p>vous pouvez utiliser le polyfill pour la méthode <code>prepend()</code> si elle n'est pas disponible :</p>
<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('prepend')) {
return;
}
Object.defineProperty(item, 'prepend', {
configurable: true,
enumerable: true,
writable: true,
value: function prepend() {
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.insertBefore(docFrag, this.firstChild);
}
});
});
})([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-prepend', 'ParentNode.prepend()')}}</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.prepend")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{domxref("ParentNode")}} et {{domxref("ChildNode")}}</li>
<li>{{domxref("ParentNode.append()")}}</li>
<li>{{domxref("Node.appendChild()")}}</li>
<li>{{domxref("Node.insertBefore()")}}</li>
<li>{{domxref("ChildNode.before()")}}</li>
<li>{{domxref("NodeList")}}</li>
</ul>
|
