jQuery .insertBefore() Method

What You’ll Learn

The .insertBefore() method inserts every matched element immediately before a target as a sibling — content-first syntax, the mirror of .before(). This tutorial covers selectors, DOM elements, HTML strings, move vs clone behavior, comparisons with .before(), .insertAfter(), and .prependTo(), the official jQuery demos, and five practical try-it examples.

Introduction

When you build new markup and already know what it is but not yet where it goes, .insertBefore() lets you configure the element first, then choose the anchor. Available since jQuery 1.0, it is the content-first counterpart to .before().

Pass a CSS selector, DOM element, HTML string, array, or jQuery object as the target parameter. The matched collection is inserted as the previous sibling before each resolved target. Unlike .before(), there is no callback form — build dynamic nodes first, then call .insertBefore().

.insertBefore() and .before() perform the same DOM task with reversed syntax. Use .prependTo() when content belongs inside the target. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .insertBefore() Method

.insertBefore( target ) takes every element in the current jQuery collection and inserts it immediately before the specified target element(s). The target stays in place; matched elements become its preceding siblings. Since jQuery 1.9, the return value is the inserted element set — not the original collection.

When moving an existing node before a single target, jQuery moves it rather than cloning. With multiple target elements, clones are created for every target after the first.

📝 Syntax

jQuery .insertBefore() accepts one argument:

Insert before target — since 1.0

.insertBefore( target )

• target — selector, DOM element, HTML string, array, or jQuery object.
• Matched elements insert as the previous sibling before each resolved target.
• Returns the inserted element collection (since jQuery 1.9 for reliable chaining).

Official insertBefore patterns

$( "p" ).insertBefore( "#foo" );

// Equivalent: $( "#foo" ).before( $( "p" ) );

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Examples 4–5 cover build-then-insert chains and multi-target insertion. Use DevTools or the Try-it links to run each snippet in the browser.

$( "p" ).insertBefore( "#foo" );

// Same as: $( "#foo" ).before( $( "p" ) );

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

Paragraph moves before #foo as sibling

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

Each .inner gets <span> Test </span> as previous sibling
Official jQuery insertBefore HTML pattern

Equivalent to $(".inner").before("<span> Test </span>")

$( "h2" ).insertBefore( $( ".container" ) );

h2 removed from original location
Inserted as sibling before .container

Single target → element moves (not cloned)

$( "<label for='email'>" )
  .text( "Email address" )
  .insertBefore( "#email-wrap" );

// Equivalent: $( "#email-wrap" ).before(
//   $( "<label for='email'>" ).text( "Email address" )
// );

<label>Email address</label> inserted before #email-wrap
.text() keeps label text safe from HTML injection
Chain configuration before choosing destination

$( "<span class='req'>*</span>" ).insertBefore( ".field-wrap" );

// Multiple .field-wrap → marker cloned before each (except first uses original)

Marker appears before each .field-wrap
Multiple targets → clones for targets after the first
Return value includes original + clones

🚀 Common Use Cases

• Build-then-place — create labels with $('<label>'), configure them, then .insertBefore() the field.
• Form labels — insert accessible labels as siblings above field wrappers.
• Section headings — place an <h2> before a content block.
• Relocate headings — move an existing <h2> to precede a layout container.
• Required markers — insert * spans before multiple field wrappers.
• Reversed syntax — prefer insertBefore when content is built before the destination is chosen.

📝 Notes

• Available since jQuery 1.0 — no callback form (build content first).
• Inserts as the previous sibling before the target; use .insertAfter() for the next sibling.
• Content-first syntax: $(content).insertBefore(target).
• Single target moves existing nodes; multiple targets clone after the first.
• Do not pass HTML strings from untrusted user input — XSS risk.
• .prependTo() inserts inside as first child; .insertBefore() inserts as sibling above.
• Since jQuery 1.9, returns the inserted element set for reliable chaining.
• Before jQuery 1.9, single-target insertBefore return value made .end() chaining unreliable.

💡 Best Practices