JavaScript Element before() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word BEFORE

Definition

The Element.before() method inserts one or more nodes or strings into the children list of this element’s parent, immediately before this element (MDN). Strings become Text nodes. It returns undefined.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.before. Start with this line.

JavaScript
el.before(node1, node2, …)
CallWhat it does
el.before(node1, node2, …)Primary signature.
el.before(...)Call with the arguments your case needs.

Built into the browser. Call before(...) on an Element — no import required.

Library declarations
JavaScript
el.before(node1, node2, …)

Parameters

ParameterDescription
Reference elementRequired. Must have a parent to insert into
param1…paramNRequired. Node objects and/or strings

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Insert an Element

Place a new sibling right before a paragraph.

JavaScript
const p = document.getElementById("p");
const out = document.getElementById("out");
const span = document.createElement("span");
span.textContent = "before";

p.before(span);
out.textContent = p.parentNode.innerHTML;
Try It Yourself

How It Works

  1. Pick the reference. p is the sibling that stays after the new content.
  2. Create the new node. Build a span (or any element).
  3. Call before(). The span becomes p’s previous sibling.
  4. Inspect the parent. innerHTML shows the updated child list.

Example 2 — Insert Text

Pass a string — the browser creates a Text node for you.

JavaScript
const p = document.getElementById("p");
const out = document.getElementById("out");

p.before("Text ");
out.textContent = p.parentNode.innerHTML;
Try It Yourself

How It Works

  1. Pass a string. No need for createTextNode here.
  2. Browser coerces it. MDN: strings become equivalent Text nodes.
  3. Order stays clear. The text sits immediately before p.
  4. Read the parent. Confirm with innerHTML.

Example 3 — Multiple Arguments

Insert an element and text in one call, in argument order.

JavaScript
const p = document.getElementById("p");
const out = document.getElementById("out");
const span = document.createElement("span");
span.textContent = "A";

p.before(span, " B ");
out.textContent = p.parentNode.innerHTML;
Try It Yourself

How It Works

  1. Pass several items. Nodes and strings can mix in one call.
  2. Keep argument order. First argument is farthest left before p.
  3. One DOM update pattern. Cleaner than several separate inserts.
  4. Verify. Parent HTML shows span, then text, then p.
Compatibility

Browser Support

Element.before() is Baseline Widely available on MDN (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard. Prefer it over older sibling-insert patterns when you can.

✓ Baseline Widely available

Element.before()

Modern ChildNode insert — nodes or strings before a sibling. Widely supported since 2018.

2018+ Widely available
Google Chrome 54+
Supported
Mozilla Firefox 49+
Supported
Apple Safari 10+
Supported
Microsoft Edge 17+
Supported
Opera 41+
Supported
Internet Explorer Not supported — use insertBefore
Unavailable
before() Baseline

Bottom line: Safe for modern browsers. For very old IE, use parent.insertBefore with a reference sibling.

Frequently Asked Questions

It inserts one or more Node objects or strings into the children of this element’s parent, immediately before this element (MDN). Strings become Text nodes.
No. MDN marks Element.before() as Baseline Widely available (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard.
Nothing useful — the return value is undefined. The DOM is updated in place; check parent.outerHTML or previousSibling if you need to verify the result.
Yes. before(node1, node2, …) inserts all arguments in order, right before the element you call it on.
before() inserts siblings immediately before the element you call it on. after() inserts immediately after. Both are ChildNode helpers; insertBefore() is the classic parent-based API.
If the element is not in a parent’s child list, before() has nowhere to insert. Invalid hierarchy cases can throw a HierarchyRequestError DOMException.

Next: checkVisibility()

Check whether an element is considered visible to the user.

checkVisibility() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

18 people found this page helpful

JavaScript Element attachShadow() Method JavaScript Element checkVisibility() Method