.before()?.before(content) inserts content as the previous sibling of each matched element (since jQuery 1.0). It sits outside the element — use .prepend() to insert inside.
$("p").before("<b>Hello</b>") // anchor first
$("<b>Hello</b>").insertBefore("p") // content first (same result)
$("p").before(" Hello ") // HTML / text
$("p").before(document.createTextNode("Hi"))
$(".box").before($("h2")) // move existing node| Need | Use |
|---|---|
| Sibling above (anchor first) | $(el).before(content) |
| Sibling above (content first) | $(content).insertBefore(el) |
| Sibling below | $(el).after(content) |
| First child inside | $(el).prepend(content) |
.before()Select the anchor element, then pass what should appear just above it.
.before(content) with HTML, a node, a jQuery object, or a callback.| Piece | Required? | Role |
|---|---|---|
| Matched set | Yes | Anchor element(s) — content goes before them |
content | Yes* | HTML, Element, Text, Array, or jQuery (*or callback) |
| Callback (1.4+) | Optional | function(index); since 1.10 also (index, html) |
| Return (1.9+) | — | Original matched set (unchanged) |
for each matched element el:
if el has no parent:
do nothing // jQuery 1.9+
continue
if content is a function:
piece = content(index [, el.innerHTML])
else:
piece = content
insert piece as previous sibling of el
// existing DOM node + one target → move
// existing DOM node + many targets → clone for all but last
return original matched setKeep these facts handy while inserting siblings.
| Topic | Detail |
|---|---|
| Syntax | .before(content [, content…]) |
| Callback | .before(function(index) { … }) since 1.4 |
| Position | Previous sibling (outside the element) |
| Since | jQuery 1.0 (callback 1.4; html arg 1.10) |
| vs insertBefore | Same task; anchor-first vs content-first |
| vs after | Above vs below as siblings |
| vs prepend | Outside sibling vs inside first child |
| No parent (1.9+) | No effect; returns original set |
Insert content before <p id="line">is what I said...</p> and watch the previous sibling appear.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Add content as the previous sibling of every <p>.
$("p").before("<b>Hello</b> ");$("p") matches every paragraph.<b> node.<p>.Insert plain text without HTML parsing.
$("p").before(document.createTextNode("Hello "));createTextNode("Hello ") builds a real text node.<p>.Insert a jQuery object before the paragraph — with one target, it moves.
$("p").before($("b"));
// <b> leaves its old parent and lands before <p>$("b") points at an existing bold element.Return different content per element (since jQuery 1.4).
$(".item").before(function (index) {
return "<span>#" + (index + 1) + "</span> ";
});.item.this is the current DOM element.Check these before using .before() in production.
.before() inserts outside the element. To add inside at the top, use .prepend().
Script tags and event attributes in inserted strings are dangerous. Prefer text nodes or escaped content.
One target removes the node from its old parent. Many targets clone for all but the last.
Calling .before() on a disconnected node does nothing and still returns the original set.
.before() has been part of jQuery since 1.0. The callback form arrived in 1.4 (with an optional HTML argument since 1.10). Return-value behavior for disconnected nodes was clarified in jQuery 1.9.
Supported in all browsers that run jQuery 1.0+. Prefer a current jQuery 3.x build for modern projects.
Bottom line: Safe for any project that already loads jQuery. Use .before() for siblings above; use .prepend() when you need content inside.
| Approach | Cost | Best for |
|---|---|---|
One .before() with a fragment | Fewer reflows | Many nodes at once |
Loop of tiny .before() calls | More DOM work | Occasional single inserts |
| Multiple arguments in one call | Single pass | Inserting several siblings together |
Batch sibling inserts when possible. Avoid calling .before() inside a tight loop when hundreds of nodes are involved.
.insertBefore() does the same job with reversed syntax..prepend() if you need the first child inside.One line: .before() adds a sibling above an element — perfect for headings, labels, and prefixes.
Copy elements (and optionally events/data) before inserting them elsewhere.
8 people found this page helpful