.appendTo()?.appendTo(target) inserts every matched element as the last child of the target (since jQuery 1.0). Same job as .append() — content comes first.
$("<li>New</li>").appendTo("#list") // content first
$("#list").append("<li>New</li>") // container first (same result)
$("span").appendTo("#foo") // move existing nodes
$("<div>Test</div>").appendTo(".inner") // create + insert| Need | Use |
|---|---|
| Content-first insert (end) | $(content).appendTo(target) |
| Container-first insert (end) | $(target).append(content) |
| Content-first insert (start) | $(content).prependTo(target) |
| Reinsert after detach | stash.appendTo("#box") |
.appendTo()Start with the content, then name the target container.
.appendTo(target) with a selector, element, HTML string, array, or jQuery object.| Piece | Required? | Role |
|---|---|---|
| Matched set | Yes | Content to insert (existing or created) |
target | Yes | Selector, Element, HTML string, Array, or jQuery |
| Return | — | Inserted set (since 1.9: original + clones when multi-target) |
content = matched elements (or newly created markup)
targets = resolve(target) // selector / element / jQuery…
for each target t:
if last target:
move content into t as last child
else:
clone content into t as last child
return inserted set // original + clones (jQuery 1.9+)
// Twin API:
targets.append(content) ≡ content.appendTo(targets)Keep these facts handy while inserting into a target.
| Topic | Detail |
|---|---|
| Syntax | .appendTo(target) |
| Position | Last child inside each target |
| Since | jQuery 1.0 |
| vs append | Same task; content-first vs container-first |
| vs prependTo | End vs start inside the target |
| Move vs clone | One target moves; many targets clone |
| Return (1.9+) | Inserted set — friendlier with .end() |
| With detach | stash.appendTo("#box") reinserts safely |
Move or create content into #box with .appendTo().
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Build an element on the fly, then drop it into a list.
$("<li>Cherry</li>").appendTo("#fruits");$("<li>Cherry</li>") builds a new list item.#fruits is the container that receives it..appendTo() places the item as the last child.Select live nodes and append them into another element.
$("span").appendTo("#foo");
// each <span> moves into #foo as a last child$("span") collects existing span elements.#foo receives them as last children..appendTo() vs .append()Same DOM result — pick the order that reads clearer.
$("<li>A</li>").appendTo("#list");
$("#list").append("<li>B</li>");
// both add a last-child <li> inside #list#list..detach()Park an element off-DOM, then put it back with .appendTo().
var stash = $("#panel").detach();
// … later …
stash.appendTo("#container");#panel but keeps jQuery data and handlers.stash stores that collection for later.stash.appendTo("#container") places it as the last child..remove() when you need the same node again.Check these before using .appendTo() in production.
Building $("<div>" + user + "</div>") is unsafe. Prefer .text() on a created element, then .appendTo().
One target removes the node from its old parent. Clone first if you need both places.
One source into many containers → clones for all but the last. The returned set includes those clones (jQuery 1.9+).
jQuery does not officially support SVG documents for methods like .appendTo() — results can be unexpected.
.appendTo() has been part of jQuery since 1.0. Return-value behavior for single-target inserts was clarified in jQuery 1.9. It works wherever your loaded jQuery version runs.
Supported in all browsers that run jQuery 1.0+. Prefer a current jQuery 3.x build for modern projects (1.9+ return set recommended).
Bottom line: Safe for any project that already loads jQuery. Use content-first syntax when creating nodes; use .append() when the container is already selected.
| Approach | Cost | Best for |
|---|---|---|
One .appendTo() with a fragment | Fewer reflows | Many nodes at once |
Loop of tiny .appendTo() calls | More DOM work | Occasional single inserts |
.detach() + later .appendTo() | Cheap park/restore | Temporary hide without losing state |
Build a batch of nodes, then call .appendTo() once. Avoid inserting inside a tight loop when hundreds of nodes are involved.
.append() does the same job with reversed syntax.stash.appendTo(target) is the standard reinsert.One line: .appendTo() is content-first insertion at the end of a target — perfect after $("<…>") or .detach().
Get or set an element’s inner HTML in one call.
9 people found this page helpful