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
|
---
title: ParentNode.prepend()
slug: orphaned/Web/API/ParentNode/prepend
translation_of: Web/API/ParentNode/prepend
original_slug: 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="Syntax">Syntax</h2>
<pre class="syntaxbox"><em>ParentNode</em>.prepend(<em>...nodesToPrepend</em>);
</pre>
<h3 id="Parameters">Parameters</h3>
<dl>
<dt><code>nodesToPrepend</code></dt>
<dd>One or more nodes to insert before the first child node currently in the <code>ParentNode</code>. Each node can be specified as either a {{domxref("Node")}} object or as a string; strings are inserted as new {{domxref("Text")}} nodes.</dd>
</dl>
<h3 id="Return_value">Return value</h3>
<p><code>undefined</code>.</p>
<h3 id="Exceptions">Exceptions</h3>
<ul>
<li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li>
</ul>
<h2 id="Examples">Examples</h2>
<h3 id="Prepending_an_element">Prepending an element</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="Prepending_text">Prepending text</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="Appending_an_element_and_text">Appending an element and text</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()_is_unscopable"><code>ParentNode.prepend()</code> is unscopable</h3>
<p>The <code>prepend()</code> method is not scoped into the <code>with</code> statement. See {{jsxref("Symbol.unscopables")}} for more information.</p>
<pre class="brush: js">var parent = document.createElement("div");
with(parent) {
prepend("foo");
}
// ReferenceError: prepend is not defined </pre>
<h2 id="Polyfill">Polyfill</h2>
<p>You can polyfill the <code>prepend()</code> method if it's not available:</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="Specification">Specification</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="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.ParentNode.prepend")}}</p>
<h2 id="See_also">See also</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>
|
