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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
title: Node.insertBefore()
slug: Web/API/Node/insertBefore
translation_of: Web/API/Node/insertBefore
---
<div>
<div>{{APIRef("DOM")}}</div>
</div>
<p><code><strong>Node.insertBefore()</strong></code> 方法將一個節點安插在參考節點之前，作為某個特定父節點之子節點。If the given child is a reference to an existing node in the document, <code>insertBefore()</code> moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).</p>
<p>同一個節點並不會同時出現在兩個地方。所以當節點已經有父節點，它會先被移除，然後被插入在新的位置上。The {{domxref("Node.cloneNode()")}} can be used to make a copy of the node before appending it under the new parent. Note that the copies made with <code>cloneNode</code> will not be automatically kept in sync.</p>
<p>若參考節點為 <code>null</code>, 那需插入的節點就會成為特定父節點的最後一個子節點。</p>
<p>If the given child is a {{domxref("DocumentFragment")}}, the entire contents of the {{domxref("DocumentFragment")}} are moved into the child list of the specified parent node.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>);
</pre>
<p>If <code><var>referenceNode</var></code> is <code>null</code>, the <code><var>newNode</var></code> is inserted at the end of the list of child nodes.</p>
<div class="note">
<p><em><code>referenceNode</code></em> <strong>並非</strong>可選擇的參數 -- 一定要傳入一個<code>節點</code>或是 <code>null</code>。若是傳入失敗或不正確的參數，可能會依不同的瀏覽器版本而有<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">不同的</a><a href="https://code.google.com/p/chromium/issues/detail?id=419780">行為</a>。</p>
</div>
<h2 id="Returns" name="Returns">Returns</h2>
<p>會回傳新加入的子節點。若該值(<code>newNode</code>)是{{domxref("DocumentFragment")}}, 則回傳空的 {{domxref("DocumentFragment")}}。</p>
<h2 id="Example_2">Example</h2>
<pre class="brush: html"><div id="parentElement">
<span id="childElement">foo bar</span>
</div>
<script>
// Create the new node to insert
var newNode = document.createElement("span");
// Get a reference to the parent node
var parentDiv = document.getElementById("childElement").parentNode;
// Begin test case [ 1 ] : Exist a childElement --> All working correctly
var sp2 = document.getElementById("childElement");
parentDiv.insertBefore(newNode, sp2);
// End test case [ 1 ]
// Begin test case [ 2 ] : childElement is of Type undefined
var sp2 = undefined; // Not exist a node of id "childElement"
parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
// End test case [ 2 ]
// Begin test case [ 3 ] : childElement is of Type "undefined" ( string )
var sp2 = "undefined"; // Not exist a node of id "childElement"
parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument"
// End test case [ 3 ]
</script></pre>
<ul>
<li><code>insertedNode</code> 被插入的節點，也就是 <code>newNode</code>。</li>
<li><code>parentNode</code> 指定的父節點。</li>
<li><code>newNode</code> 被插入的節點。</li>
<li><code>referenceNode</code> 參考節點。The node before which <code>newNode</code> is inserted.</li>
</ul>
<h2 id="Example" name="Example">Example</h2>
<pre class="brush:html"><div id="parentElement">
<span id="childElement">foo bar</span>
</div>
<script>
// Create a new, plain <span> element
var sp1 = document.createElement("span");
// Get a reference to the element, before we want to insert the element
var sp2 = document.getElementById("childElement");
// Get a reference to the parent element
var parentDiv = sp2.parentNode;
// Insert the new element into the DOM before sp2
parentDiv.insertBefore(sp1, sp2);
</script>
</pre>
<p>There is no <code>insertAfter</code> method. It can be emulated by combining the <code>insertBefore</code> method with <code><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p>
<p>In the previous example, <code>sp1</code> could be inserted after <code>sp2</code> using:</p>
<pre><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre>
<p>If <code>sp2</code> does not have a next sibling, then it must be the last child — <code>sp2.nextSibling</code> returns <code>null</code>, and <code>sp1</code> is inserted at the end of the child node list (immediately after <code>sp2</code>).</p>
<h2 id="Example" name="Example">Example</h2>
<p>Insert an element before the first child element, using the <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a> property.</p>
<pre class="brush:js">// Get a reference to the element in which we want to insert a new node
var parentElement = document.getElementById('parentElement');
// Get a reference to the first child
var theFirstChild = parentElement.firstChild;
// Create a new element
var newElement = document.createElement("div");
// Insert the new element before the first child
parentElement.insertBefore(newElement, theFirstChild);
</pre>
<p>When the element does not have a first child, then <code>firstChild</code> is <code>null</code>. The element is still appended to the parent, after the last child. Since the parent element did not have a first child, it did not have a last child either. Consequently, the new element is the only element, after insertion.</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{Compat("api.Node.insertBefore")}}</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="spectable 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-node-insertbefore','Node.insertBefore')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Fixes errors in the insertion algorithm</td>
</tr>
<tr>
<td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
<td>{{Spec2('DOM4')}}</td>
<td>Describes the algorithm in more detail</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
<td>{{Spec2('DOM3 Core')}}</td>
<td>No notable changes</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
<td>{{Spec2('DOM2 Core')}}</td>
<td>No notable changes</td>
</tr>
<tr>
<td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td>
<td>{{Spec2('DOM1')}}</td>
<td>Introduced</td>
</tr>
</tbody>
</table>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
<li>{{domxref("Node.removeChild()")}}</li>
<li>{{domxref("Node.replaceChild()")}}</li>
<li>{{domxref("Node.appendChild()")}}</li>
<li>{{domxref("Node.hasChildNodes()")}}</li>
<li>{{domxref("Element.insertAdjacentElement()")}}</li>
<li>{{domxref("ParentNode.prepend()")}}</li>
</ul>
|
