JavaScript Element prepend() Method

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

Definition

The Element.prepend() method inserts one or more nodes or strings before the first child of the 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.prepend. Start with this line.

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

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

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

Parameters

ParameterDescription
Parent elementRequired. Receives the new first children
param1…paramNRequired. Node objects and/or strings

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Prepend an Element (MDN)

Append a paragraph, then prepend a span so the span lands first.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
const p = document.createElement("p");
const span = document.createElement("span");
span.textContent = "Start";
p.textContent = "End";

box.append(p);
box.prepend(span);
out.textContent = box.innerHTML;
Try It Yourself

How It Works

  1. Append first. p becomes the only child.
  2. Call prepend(span). The span goes before the first child.
  3. Order is span, then p — same idea as MDN’s NodeList example.
  4. Inspect. innerHTML shows the updated children.

Example 2 — Prepend Text (MDN)

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

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

box.append("Some text");
box.prepend("Headline: ");
out.textContent = box.textContent;
Try It Yourself

How It Works

  1. Append body text first so the parent is not empty.
  2. Pass a string to prepend. No need for createTextNode.
  3. Browser coerces it. MDN: strings become equivalent Text nodes.
  4. Read the result. textContent is "Headline: Some text".

Example 3 — Multiple Arguments (MDN)

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

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
const p = document.createElement("p");
p.textContent = "Hi";

box.prepend("Some text", p);
out.textContent = box.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 the first of the new bits.
  3. They land at the start of the parent’s child list.
  4. Verify. Parent HTML shows text, then the paragraph.
Compatibility

Browser Support

Element.prepend() is Baseline Widely available on MDN (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard. Prefer it over insertBefore when you need strings or multiple nodes at the start.

✓ Baseline Widely available

Element.prepend()

Modern ParentNode insert — nodes or strings before the first child. 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
prepend() Baseline

Bottom line: Safe for modern browsers. For very old IE, use insertBefore(node, parent.firstChild).

Frequently Asked Questions

MDN: it inserts one or more Node objects or strings before the first child of the element. Strings are inserted as equivalent Text nodes.
No. MDN marks Element.prepend() as Baseline Widely available (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard.
prepend() inserts before the first child; append() inserts after the last child. Both accept multiple nodes and strings and return undefined.
Nothing useful — the return value is undefined (MDN). Inspect childNodes or textContent to verify what was added.
Yes. Pass a string: el.prepend("Headline: "). The browser creates a Text node for you (MDN).
Like append, prepend moves the node to the new position. Use cloneNode() if you need a copy.

Next: pseudo()

Continue with the Element pseudo() method.

pseudo() →

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)

14 people found this page helpful

JavaScript Element moveBefore() Method JavaScript Element pseudo() Method