diff options
Diffstat (limited to 'files/zh-tw/web/api/node/insertbefore/index.html')
| -rw-r--r-- | files/zh-tw/web/api/node/insertbefore/index.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/node/insertbefore/index.html b/files/zh-tw/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..393cc88d80 --- /dev/null +++ b/files/zh-tw/web/api/node/insertbefore/index.html @@ -0,0 +1,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> |