jQuery .prependTo() Method

What You’ll Learn

The .prependTo() method inserts matched elements as the first child of a target container — the reversed syntax of .prepend(). This tutorial covers target types since 1.0, the detach-and-reinsert pattern, move vs clone behavior, comparisons with .prepend(), .appendTo(), and .detach(), the official jQuery demo, and five practical try-it examples.

Introduction

When you build an element first and want it at the top of a list or feed, reading “prepend this alert to the notification panel” feels natural. jQuery provides .prependTo() for exactly that workflow — the matched elements come before the method, and the target container is the argument.

Available since jQuery 1.0, .prependTo( target ) performs the same DOM insertion as .prepend() but with reversed syntax. $( "<li>New</li>" ).prependTo( "#feed" ) reads like English: create the item, prepend it to the feed. It is also the standard way to reinsert nodes at the top after .detach().

The target can be a selector, DOM element, HTML string, array, or jQuery object. When moving an existing element into a single target, jQuery moves it rather than cloning. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .prependTo() Method

.prependTo( target ) takes the current jQuery collection (the elements to insert) and prepends each one as the first child inside the resolved target element(s). The return value is a jQuery collection of the inserted elements.

Since jQuery 1.9, when prepending to a single target, the returned collection contains the inserted elements (making .end() chaining reliable). With multiple targets, clones are created for all but the last target.

📝 Syntax

jQuery .prependTo() has one form:

Prepend matched elements to target — since 1.0

.prependTo( target )

• target — selector, DOM element, HTML string, array, or jQuery object.
• Matched elements become the first children inside each resolved target.

Return value

• Returns a jQuery collection of the inserted elements.
• Since jQuery 1.9, single-target insertion returns the moved/cloned set reliably.

Official prependTo pattern

$( "span" ).prependTo( "#foo" );

Equivalent container-first form: $( "#foo" ).prepend( $( "span" ) ).

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.

$( "span" ).prependTo( "#foo" );

All span elements moved into #foo as first children
Original locations lose the spans (moved, not cloned)

Official jQuery prependTo demo pattern

$( "<li>" )
  .text( "New alert" )
  .prependTo( "#notifications" );

// Equivalent: $( "#notifications" ).prepend( $( "<li>" ).text( "New alert" ) );

<li>New alert</li> prepended to #notifications
Chain .text() before .prependTo() on the new element

Same DOM as $("#notifications").prepend(...)

var banner = $( "#promo-banner" ).detach();

// ... later, user returns to page section ...
banner.prependTo( "#content-area" );

Banner detached from DOM — stored in variable
prependTo("#content-area") reinserts it at the top
Click handlers and .data() still work



Classic detach + prependTo workflow

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

h2 removed from original location
Prepended as first child of .container
Single target → element moves (not cloned)

$( "<b>Test</b>" ).prependTo( ".inner" );

// Same as: $( ".inner" ).prepend( "<b>Test</b>" );
// Multiple .inner targets → cloned copy in each (except move logic for elements)

<b>Test</b> prepended to every .inner div
Each container gets the markup as first child

Fresh HTML string → new node per target

🚀 Common Use Cases

• Build-then-place — create a notification with $("<li>"), configure it, then .prependTo("#feed").
• Detach reinsert — stash off-DOM banners with detach, restore at top with prependTo.
• Newest-first feeds — prepend alerts so the latest item appears first without re-sorting.
• Layout reflow — move a heading or toolbar to the top of a shared container.
• Sortable lists — prepend dragged list items to a new parent on drop for priority placement.
• Tab panels — prepend active panel into shared container after detach.

📝 Notes

• Available since jQuery 1.0 — mirror of .prepend() with reversed syntax.
• No callback form — use .prepend(function) on the container for per-element insertion.
• Single-target move returns the inserted element set since jQuery 1.9 (reliable .end()).
• Multiple targets clone existing DOM nodes for all but the last destination.
• Pair with .detach() for temporary removal and later reinsertion at the top.
• Do not pass untrusted HTML strings to jQuery constructors used with prependTo — XSS risk.
• .appendTo() inserts at the end; .prependTo() at the beginning.

💡 Best Practices