jQuery insertBefore() Method

What Is insertBefore()?

.insertBefore(target) inserts every matched element immediately before the target as a sibling (since jQuery 1.0). Content comes first; the target is the argument — the reverse of .before().

$("p").insertBefore("#foo")
// same DOM result as:
$("#foo").before($("p"))

$("<span> Test </span>").insertBefore(".inner")

// sibling ABOVE target — not inside it
// (inside = .prependTo)

How to Use insertBefore()

Build or select content, pass a target, insert as the previous sibling.

1. Create or select the content (HTML string, existing nodes, or a jQuery object).
2. Choose the target: selector, element, HTML string, array, or jQuery object.
3. Call .insertBefore(target) — content becomes the previous sibling.
4. Chain further on the returned inserted set (reliable since jQuery 1.9).

Pseudocode

content = matched elements (or new HTML nodes)
targets = resolve(target)

for each t in targets:
    if first target:
        move content before t
    else:
        clone content before t

return inserted set   // original + clones

// Same idea as .before(), reversed syntax:
// content.insertBefore(target)  ≡  target.before(content)

Cheat Sheet

Keep these facts handy while inserting siblings.

Live Preview

Run the official patterns against a tiny demo tree and see the sibling order change.

Ready — pick an action and run.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

// <div id="foo">FOO!</div><p>I would like to say: </p>
$("p").insertBefore("#foo");
// same as: $("#foo").before($("p"));

<p>I would like to say: </p>
<div id="foo">FOO!</div>

// <div class="container">
//   <h2>Greetings</h2>
//   <div class="inner">Hello</div>
//   <div class="inner">Goodbye</div>
// </div>
$("<span> Test </span>").insertBefore(".inner");

<h2>Greetings</h2>
<span> Test </span><div class="inner">Hello</div>
<span> Test </span><div class="inner">Goodbye</div>

// Start: h2 lives inside .container
$("h2").insertBefore($(".container"));
// Result: h2 moves out and sits before .container

<h2>Greetings</h2>
<div class="container">…</div>

// Content first — build, then place
$("<label>").text("Email").insertBefore("#email");

// Anchor first — same DOM result
$("#email").before($("<label>").text("Email"));

<label>Email</label>
<input id="email">

Performance Notes

Prefer one clear insert over many tiny DOM moves in a loop. Batch when you can, and avoid inserting untrusted HTML strings.

Key Takeaways