From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/fa/web/api/node/insertbefore/index.html | 155 ++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 files/fa/web/api/node/insertbefore/index.html (limited to 'files/fa/web/api/node/insertbefore/index.html') 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 +--- +
+
Mojtaba iranpour {{APIRef("DOM")}}
+
+ +

The Node.insertBefore() method inserts the specified node before a reference node as a child of the current node.

+ +

Syntax

+ +
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
+
+ +

In Mozilla Firefox, if referenceNode is null, newNode is inserted at the end of the list of child nodes.  If the referenceNode is of [ Type ] "undefined" ( this kind of argument is String ) will be throw, in all of the browser ( IE, Chrome and Mozilla ) a "Type Error: Invalid Argument" since the the function insertBefore accept as second argument a [ Type ] Node.

+ +

Example

+ +
<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 ]
+
+ + + +

Example

+ +
<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>
+
+ +

There is no insertAfter method. It can be emulated by combining the insertBefore method with nextSibling.

+ +

In the previous example, sp1 could be inserted after sp2 using:

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling);
+ +

If sp2 does not have a next sibling, then it must be the last child — sp2.nextSibling returns null, and sp1 is inserted at the end of the child node list (immediately after sp2).

+ +

Example 2

+ +

Insert an element before the first child element, using the firstChild property.

+ +
// 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);
+
+ +

When the element does not have a first child, then firstChild is null. 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.

+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Specification

+ + -- cgit v1.2.3-54-g00ecf