jQuery .prepend() Method

What You’ll Learn

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

Introduction

Activity feeds, notification trays, and chat headers often need new items at the top — the latest alert appears first, above older entries. When content should be inserted as the first child inside a container, jQuery provides .prepend().

Available since jQuery 1.0, .prepend() is the mirror of .append(). Where .append() adds nodes at the bottom, .prepend() adds them at the top. You can pass HTML strings, text nodes, DOM elements, jQuery objects, multiple arguments, or a callback function (since 1.4).

.prepend() and .prependTo() perform the same task with reversed syntax. Use .append() when new items belong at the bottom. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .prepend() Method

.prepend( content [, content ] ) inserts content before the first existing child of each matched element. Existing children shift down. The return value is the same jQuery collection (for chaining).

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

📝 Syntax

jQuery .prepend() supports three forms:

Prepend content — since 1.0

.prepend( content [, content ] )

• content — HTML string, DOM element, text node, array, or jQuery object.
• Multiple arguments are inserted in order as the first children.

Prepend with callback — since 1.4

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

Official prepend patterns

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

Examples Gallery

Examples 1–5 follow the official jQuery API documentation and common production patterns. Use DevTools or the Try-it links to run each snippet in the browser.

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

Before: <p>there, friend!</p>
After:  <p> Hello there, friend!</p>

" Hello " inserted before existing text — first child position

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

Text node "Hello " prepended — no HTML parsing
Safer for user-supplied plain text

Official jQuery Example 2 pattern

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

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

<b> removed from original location
Prepended as first child of matched <p> elements

Single target → element moves (not cloned)

$( ".item" ).prepend( function( index ) {
  return "<span class='tag'>Top #" + ( index + 1 ) + "</span> ";
});

Each .item gets "Top #1", "Top #2" prepended
Callback runs once per matched element
Content appears before existing children

function addNotification( message ) {
  var $item = $( "<li class='alert'>" ).text( message );
  $( "#notifications" ).prepend( $item );
}

addNotification( "New message received" );

New <li> appears at top of #notifications
Older items shift down — no re-sort needed
Use .text() for safe message content



Classic prepend use case vs append for chat logs

🚀 Common Use Cases

• Notification feeds — prepend new alerts so the latest appears at the top.
• Activity streams — Twitter-style timelines with newest entries first.
• Table headers in tbody — prepend a summary row above data rows.
• Breadcrumb prefixes — prepend a home link inside a nav container.
• Form hints — prepend helper text above existing field groups.
• Move banner to top — prepend an existing promo element inside a layout shell.

📝 Notes

• Available since jQuery 1.0 — callback form added in jQuery 1.4.
• Inserts as the first child; use .append() for the last child.
• Existing children remain and shift after prepended content.
• Appending to single target moves existing nodes; multiple targets clone except last.
• Do not prepend HTML strings from untrusted user input — XSS risk.
• .before() inserts as a sibling before the element; .prepend() inserts inside.
• Multiple arguments supported: .prepend(a, b, c).

💡 Best Practices