Element.before()
The Element.before() method inserts a set of Node or DOMString objects in the children list of this Element's parent, just before this Element. DOMString objects are inserted as equivalent Text nodes.
Syntax
before(... nodes)
Parameters
Exceptions
-
HierarchyRequestErrorDOMException -
Thrown when the node cannot be inserted at the specified point in the hierarchy.
Examples
Inserting an element
let container = document.createElement("div"); let p = document.createElement("p"); container.appendChild(p); let span = document.createElement("span"); p.before(span); console.log(container.outerHTML); // "<div><span></span><p></p></div>"
Inserting text
let container = document.createElement("div"); let p = document.createElement("p"); container.appendChild(p); p.before("Text"); console.log(container.outerHTML); // "<div>Text<p></p></div>"
Inserting an element and text
let container = document.createElement("div"); let p = document.createElement("p"); container.appendChild(p); let span = document.createElement("span"); p.before(span, "Text"); console.log(container.outerHTML); // "<div><span></span>Text<p></p></div>"
Specifications
| Specification |
|---|
| DOM Standard (DOM) # ref-for-dom-childnode-before① |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
before |
54 |
17 |
49 |
No |
39 |
10 |
54 |
54 |
49 |
41 |
10 |
6.0 |
See also
Element.after()Element.append()Node.appendChild()Node.insertBefore()Element.insertAdjacentElement()NodeList
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/before