jQuery .before() Method

What You’ll Learn

The .before() method inserts content immediately before each matched element as a sibling. This tutorial covers HTML strings, text nodes, DOM elements, jQuery objects, multiple arguments, and the callback form since 1.4, comparisons with .after(), .insertBefore(), and .prepend(), the official jQuery demos, and five practical try-it examples.

Introduction

Section headings, field labels, breadcrumb prefixes, and intro paragraphs often need to appear right above an existing element — not inside it. When content should sit as the previous sibling before a matched node, jQuery provides .before().

Available since jQuery 1.0, .before() is the mirror of .after(). Where .after() inserts content below the element, .before() inserts it above. You can pass HTML strings, text nodes, DOM elements, jQuery objects, multiple arguments, or a callback function (since 1.4).

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

Understanding the .before() Method

.before( content [, content ] ) inserts content immediately before each matched element in the DOM tree. The matched element itself is unchanged; new nodes appear as its preceding siblings. The return value is the same jQuery collection (for chaining).

When inserting an element already in the document before a single target, jQuery moves it rather than copying it. Since jQuery 1.4, the callback form .before( function( index ) ) runs once per matched element; return content to insert before that element.

📝 Syntax

jQuery .before() supports three forms:

Insert before — since 1.0

.before( content [, content ] )

• content — HTML string, DOM element, text node, array, or jQuery object.
• Multiple arguments are inserted in order before each matched element.

Insert with callback — since 1.4

.before( function( index [, html ] ) {
  // return content to insert; `this` is the current element
} )

Official before patterns

$( "p" ).before( " Hello " );

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Examples 4–5 cover the callback form and multiple-argument insertion from the docs. Use DevTools or the Try-it links to run each snippet in the browser.

$( "p" ).before( " Hello " );

Before: <p>is what I said...</p>
After:  Hello <p>is what I said...</p>

" Hello " appears as sibling before each <p> — not inside it

$( "p" ).before( document.createTextNode( "Hello" ) );

Text node "Hello" inserted before each paragraph
No HTML parsing — safer for plain text

Official jQuery Example 2 pattern

$( "p" ).before( $( "b" ) );

// <b>Hello</b> moves to precede each <p>
// (cloned for all but last target if multiple matches)

<b> removed from original location
Inserted as sibling before matched <p> elements

Single target → element moves (not cloned)

$( "p" ).before( function() {
  return "<b>" + this.className + "</b>";
});

Each <p> gets a <b> sibling showing its className
Callback runs once per matched element
<b> appears before the paragraph, not inside it

var $newdiv1 = $( "<div class='note'>Note</div>" ),
    newdiv2 = document.createElement( "div" ),
    existingdiv1 = document.getElementById( "foo" );

newdiv2.textContent = "Created with createElement";

$( "p" ).first().before( $newdiv1, [ newdiv2, existingdiv1 ] );

Three nodes inserted before first <p> in order:
  1. jQuery div.note
  2. createElement div
  3. existing #foo element (moved)

Equivalent to .before(a, b, c) with separate arguments

🚀 Common Use Cases

• Section headings — insert an <h2> or label immediately before a content block.
• Form field labels — add helper text or required markers above input wrappers.
• Breadcrumb prefixes — prepend navigation links as siblings before page titles.
• Horizontal rules — add <hr> separators before new sections.
• Relocate elements — move an existing heading or banner to precede a container.
• Dynamic labels — use the callback form to insert badges showing each element’s class name.

📝 Notes

• Available since jQuery 1.0 — callback form added in jQuery 1.4.
• Inserts as the previous sibling; use .after() for the next sibling.
• Matched elements are unchanged — content goes outside, not inside.
• Inserting before a single target moves existing nodes; multiple targets clone except last.
• Do not pass HTML strings from untrusted user input — XSS risk.
• .prepend() inserts inside as first child; .before() inserts as sibling above.
• Since jQuery 1.9, .before() always returns the original matched set.
• Multiple arguments supported: .before(a, b, c).

💡 Best Practices