initial commit

1 files changed, 155 insertions, 0 deletions

diff --git a/files/fa/web/api/node/insertbefore/index.html b/files/fa/web/api/node/insertbefore/index.html
new file mode 100644
index 0000000000..5e853fc373
--- /dev/null
+++ b/files/fa/web/api/node/insertbefore/index.html
@@ -0,0 +1,155 @@
+---
+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">&lt;div id="parentElement"&gt;
+   &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+//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 --&gt; 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">&lt;div id="parentElement"&gt;
+  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Create a new, plain &lt;span&gt; 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);
+&lt;/script&gt;
+</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>