The .appendTo() method inserts matched elements as the last child of a target container — the reversed syntax of .append(). This tutorial covers target types since 1.0, the detach-and-reinsert pattern, move vs clone behavior, comparisons with .append(), .prependTo(), and .detach(), the official jQuery demo, and five practical try-it examples.
Content first
Container
Inverse
Reinsert
Not clone
Core API
When you build an element first and then decide where it belongs, reading “append this item to that list” feels natural. jQuery provides .appendTo() for exactly that workflow — the matched elements come before the method, and the target container is the argument.
Available since jQuery 1.0, .appendTo( target ) performs the same DOM insertion as .append() but with reversed syntax. $( "<li>New</li>" ).appendTo( "#list" ) reads like English: create the item, append it to the list. It is also the standard way to reinsert nodes 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.
.appendTo() Method.appendTo( target ) takes the current jQuery collection (the elements to insert) and appends each one as the last child inside the resolved target element(s). The return value is a jQuery collection of the inserted elements.
Since jQuery 1.9, when appending 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.
$("#list").append("<li>") and $("<li>").appendTo("#list") produce the same DOM result. Use whichever syntax matches how you think about the operation — container-first vs content-first.
jQuery .appendTo() has one form:
.appendTo( target )$( "span" ).appendTo( "#foo" );Equivalent container-first form: $( "#foo" ).append( $( "span" ) ).
| Goal | Code |
|---|---|
| Append element to container | $("<li>").appendTo("#list") |
| Move existing node | $("#widget").appendTo("#sidebar") |
| Reinsert after detach | stash.appendTo("#container") |
| Append to jQuery target | $("h2").appendTo($(".container")) |
| Container-first equivalent | $("#list").append($("<li>")) |
| Insert at top instead | $("<li>").prependTo("#list") |
.appendTo() vs .append() vs .prependTo() vs .detach()Four related DOM insertion APIs — pick the right syntax and workflow.
content firstInsert matched elements at end of target — content precedes method, target is argument
target firstInsert content at end inside matched elements — container precedes method
first childInsert matched elements at beginning of target — reversed syntax of prepend
stashRemove elements from DOM preserving state — pair with appendTo to reinsert
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.
Official jQuery demo and reversed-syntax patterns.
#fooMove every <span> on the page into the element with id foo.
$( "span" ).appendTo( "#foo" );The matched collection (span elements) is inserted at the end of #foo. Existing elements inside #foo remain; spans are appended after them. Spans disappear from their original positions in the document.
Create a list item and append it to a container — content-first reads naturally.
$( "<li>" )
.text( "New item" )
.appendTo( "#todo-list" );
// Equivalent: $( "#todo-list" ).append( $( "<li>" ).text( "New item" ) );Building the element first and chaining .appendTo() at the end keeps creation logic together. This pattern is popular when configuring the new node (classes, data, events) before choosing its destination.
Detach reinsertion, moving headings, and multi-target insertion.
.detach()Stash a panel off-DOM, then restore it with .appendTo() — events and data intact.
var panel = $( "#sidebar-panel" ).detach();
// ... later, user opens sidebar again ...
panel.appendTo( "#sidebar-container" );.detach() removes the panel but preserves jQuery state. .appendTo() puts it back as the last child of the container. This avoids rebuilding markup or rebinding events on every show/hide cycle.
Relocate an existing <h2> into a layout container — official jQuery pattern.
$( "h2" ).appendTo( $( ".container" ) );The target can be a jQuery object, not just a selector string. jQuery resolves .container and appends the heading as its last child. The heading node is moved from its old parent — no duplicate created.
Insert the same markup into every .inner element — equivalent to append from the container side.
$( "<b>Test</b>" ).appendTo( ".inner" );
// Same as: $( ".inner" ).append( "<b>Test</b>" );
// Multiple .inner targets → cloned copy in each (except move logic for elements)When the matched set is newly created HTML, each target receives its own parsed copy. When moving an existing single DOM node to multiple targets, jQuery clones for all but the last. Understand this distinction to avoid surprise duplicates.
$("<div>"), configure it, then .appendTo("#dashboard")..appendTo() Inserts Into TargetsjQuery collection contains nodes that will be appended.
Selector, element, or jQuery object identifies destination parent(s).
Single target moves existing nodes; multiple targets clone except last.
jQuery collection of appended elements — ready for further chaining.
.append() with reversed syntax..append(function) on the container for per-element insertion..end())..detach() for temporary removal and later reinsertion..prependTo() inserts at the beginning; .appendTo() at the end..appendTo() has been part of jQuery since 1.0+. It relies on standard DOM appendChild operations. Works in all browsers supported by your jQuery build — IE6+ through modern evergreen browsers in legacy jQuery versions, and all current browsers in jQuery 3.x and 4.x.
Universal DOM insertion API across jQuery 1.x, 2.x, 3.x, and 4.x. No browser-specific polyfills required — jQuery normalizes target resolution and move-or-clone logic. Pair with .detach() for stash-and-restore workflows.
Bottom line: Default choice for content-first insertion into a target container.
The jQuery .appendTo() method inserts matched elements as the last child of a target container — the reversed syntax of .append(). Use it when building content first or reinserting nodes after .detach(), exactly as the official span demo demonstrates.
Choose .append() when the container comes first in your mental model, and .prependTo() for first-child insertion. Next up: reading and setting inner HTML with .html().
.appendTo() when building elements before choosing a container.detach() with .appendTo() for show/hide panels.text(), .addClass()) before appendTo.text() on created elements for safe dynamic content.appendTo() with .prependTo() (last vs first).append(fn) instead.appendTo()The content-first insertion API — matched elements into a target.
Comes first
SyntaxArgument
ContainerSame task
InverseReinsert
PairSingle target
DOM.appendTo() and .append() have been mirror methods since jQuery 1.0, but jQuery 1.9 changed what appendTo returns when inserting into a single element — it now returns the inserted element set instead of the original set, making .end() chaining predictable. Before that change, developers had to carefully track which collection they held after appendTo. The detach + appendTo pair remains one of the most common jQuery patterns for modal dialogs, tab panels, and sortable lists that move DOM nodes without destroying event handlers.
Get or set the HTML contents of matched elements with getter and setter forms.
6 people found this page helpful