JavaScript Element prepend() Method

What You’ll Learn

Element.prepend() is an instance method from the ParentNode API. It inserts nodes or strings before the first child of the element. Learn multi-argument prepends, text coercion, how it compares to append() and insertBefore(), and five try-it labs.

Introduction

insertBefore() adds one node at a time. prepend() is the modern ParentNode helper: add several nodes and plain strings in a single call, all as the new first children of the element.

Strings become Text nodes automatically—no createTextNode required for simple labels.

This page is part of JavaScript Element. Related topics include append() and before().

Understanding the prepend() Method

Calling el.prepend(...nodes) inserts each argument at the start of el’s child list, in the order you pass them.

• It is an instance method on Element (ParentNode mixin).
• Arguments can be Node objects or strings (as Text).
• Multiple arguments prepend in the order given (MDN).
• Existing nodes in the document are moved, not cloned.
• Return value is undefined (unlike insertBefore).
• MDN: prepend is unscopable—unavailable inside a with statement.

📝 Syntax

General forms of Element.prepend (MDN):

prepend(param1)
prepend(param1, param2)
prepend(param1, param2, /* …, */ paramN)

Parameters

Return value

Exceptions

• HierarchyRequestError DOMException — thrown when the node cannot be inserted at the specified point in the hierarchy (MDN).

Common patterns

let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");

div.append(p);
div.prepend(span);             // span before p (MDN)

div.prepend("Headline: ");     // text before children
div.prepend("Hi ", p, "!");    // text + element + text

Examples Gallery

Examples follow MDN Element.prepend() patterns. Use View Output or Try It Yourself for each case.

let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");
div.append(p);
div.prepend(span);

console.log(div.childNodes); // NodeList [ <span>, <p> ]

2
SPAN, P

let div = document.createElement("div");
div.append("Some text");
div.prepend("Headline: ");

console.log(div.textContent); // "Headline: Some text"

Headline: Some text

let div = document.createElement("div");
let p = document.createElement("p");
div.prepend("Some text", p);

console.log(div.childNodes);
// NodeList [ #text "Some text", <p> ]

2
#text, P

const item = document.getElementById("item");
const badge = document.createElement("strong");
badge.textContent = "NEW";
const note = document.createElement("em");
note.textContent = "sale";

item.prepend(badge, " — ", note, " ");

console.log(item.innerHTML);
// <strong>NEW</strong> — <em>sale</em> Shoes

<strong>NEW</strong> — <em>sale</em> Shoes

const list = document.getElementById("list");
const a = document.getElementById("a");
const b = document.getElementById("b");

list.prepend(a);

console.log([...list.children].map((el) => el.id).join(", "));
// "a, b"  (a moved to the front)

a, b

🚀 Common Use Cases

• Adding headlines or labels before existing content (MDN text example).
• Inserting badges or icons at the start of list items.
• Replacing several insertBefore calls with a single prepend.
• Moving an existing child to the front of a container.
• Teaching ParentNode helpers vs classic Node methods.
• Pairing with append() for clear start vs end placement.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available since April 2018).
• prepend() inserts children at the start—not siblings.
• Return value is always undefined.
• Invalid hierarchy can raise HierarchyRequestError.
• MDN: prepend is unscopable (not available inside with).
• Related: append(), before(), moveBefore(), JavaScript hub.

💡 Best Practices