diff options
Diffstat (limited to 'files/fa/web/api/node/insertbefore/index.html')
| -rw-r--r-- | files/fa/web/api/node/insertbefore/index.html | 155 |
1 files changed, 0 insertions, 155 deletions
diff --git a/files/fa/web/api/node/insertbefore/index.html b/files/fa/web/api/node/insertbefore/index.html deleted file mode 100644 index 5e853fc373..0000000000 --- a/files/fa/web/api/node/insertbefore/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Node.insertBefore() -slug: Web/API/Node/insertBefore -translation_of: Web/API/Node/insertBefore ---- -<div> -<div>Mojtaba iranpour {{APIRef("DOM")}}</div> -</div> - -<p>The <code><strong>Node.insertBefore()</strong></code> method inserts the specified node before a reference node as a child of the current 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>In Mozilla Firefox, if <code><var>referenceNode</var></code> is <code>null</code><span style="font-size: 14px; line-height: 1.5;">, </span><code><var>newNode</var></code><span style="font-size: 14px; line-height: 1.5;"> is inserted at the end of the list of child nodes. If the <code><em>referenceNode </em></code>is of <em><code>[ Type ]</code> "<code><em>undefined"</em> </code></em>( this kind of argument is <code>String</code> ) will be throw, in all of the browser ( IE, Chrome and Mozilla ) a "Type Error: Invalid Argument" since the the function </span><code>insertBefore </code>accept as second argument a<em><code> [ Type ] Node.</code></em></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("parentElement").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 ] -</pre> - -<ul> - <li><code>insertedNode</code> The node being inserted, that is <code>newNode</code></li> - <li><code>parentNode</code> The parent of the newly inserted node.</li> - <li><code>newNode</code> The node to insert.</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="Example2" name="Example2">Example 2</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>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Specification" name="Specification">Specification</h2> - -<ul> - <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></li> -</ul> |