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: ParentNode.prepend()
slug: Web/API/ParentNode/prepend
translation_of: Web/API/ParentNode/prepend
---
<div>{{APIRef("DOM")}}</div>
<p>Метод <strong><code>ParentNode.prepend()</code></strong> вставляет множество объектов {{domxref("Node")}} или {{domxref("DOMString")}} в начало (перед первым потомком) {{domxref("ParentNode")}}. Объекты {{domxref("DOMString")}} вставляются как {{domxref("Text")}}.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox"><em>ParentNode</em>.prepend(<em>...nodesToPrepend</em>);
</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><code>nodesToPrepend</code></dt>
<dd>Один или болле узлов, которые вставляются перед первым дочерним узлом в <code>ParentNode</code>. Каждый узел может быть определён либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("Text")}}.</dd>
</dl>
<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
<p><code>undefined</code>.</p>
<h3 id="Исключения">Исключения</h3>
<ul>
<li>{{domxref("HierarchyRequestError")}}: Узел не может быть вставлен в указанную позицию данной иерархии.</li>
</ul>
<h2 id="Примеры">Примеры</h2>
<h3 id="Добавление_элемента_в_начало">Добавление элемента в начало</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="Добавление_текста_в_начало">Добавление текста в начало</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="Добавление_элемента_и_текста">Добавление элемента и текста</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_не_имеет_области_видимости"><code>ParentNode.prepend()</code> не имеет области видимости</h3>
<p>Метод <code>prepend()</code> не входит в область видимости оператора <code>with</code>. Смотрите {{jsxref("Symbol.unscopables")}} для детальной информации.</p>
<pre class="brush: js">var parent = document.createElement("div");
with(parent) {
prepend("foo");
}
// ReferenceError: prepend is not defined </pre>
<h2 id="Полифил">Полифил</h2>
<p>Вы можете использовать полифил, если метод <code>prepend()</code> не доступный:</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="Спецификация">Спецификация</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat("api.ParentNode.prepend")}}</p>
<h2 id="Смотри_также">Смотри также</h2>
<ul>
<li>{{domxref("ParentNode")}} and {{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>
|
