prependTo()?.prependTo(target) inserts every matched element as the first child of the target (since jQuery 1.0). Content comes first; the target is the argument — the reverse of .prepend().
$("span").prependTo("#foo")
// same DOM result as:
$("#foo").prepend($("span"))
$("<span> Test </span>").prependTo(".inner")
$("h2").prependTo($(".container"))
// first child inside target — not a sibling
// (bottom insert = .appendTo)| Need | Use |
|---|---|
| Content first, first child | $(el).prependTo(target) |
| Container first | $(target).prepend(content) |
| Last child (content first) | .appendTo() |
| Sibling above (outside) | .insertBefore() |
prependTo()Build or select content, pass a target, insert as the first child.
.prependTo(target) — content becomes the first child inside.| Piece | Required? | Role |
|---|---|---|
| jQuery collection | Yes | Content to insert |
target | Yes | Container that receives content first |
| Return | — | Inserted element set (jQuery 1.9+) |
content = matched elements (or new HTML nodes)
targets = resolve(target)
for each t in targets:
if last target:
move content as first child of t
else:
clone content as first child of t
return inserted set
// Same idea as .prepend(), reversed syntax:
// content.prependTo(target) ≡ target.prepend(content)Keep these facts handy while inserting into a target.
| Topic | Detail |
|---|---|
| Syntax | .prependTo(target) |
| Since | jQuery 1.0 |
| Position | First child inside the target |
vs .prepend() | Same result; content-first vs container-first |
| Callback? | No — build dynamic nodes first |
| One target | Existing nodes move |
| Many targets | Clones except for the last |
Run official-style prependTo actions on a tiny demo tree and see content land as the first child.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
#fooMove every <span> so it becomes the first child of #foo.
// <div id="foo">FOO!</div>
// <span>I have something to say... </span>
$("span").prependTo("#foo");
// same as: $("#foo").prepend($("span"));$("span") is what will move."#foo" is the container.#foo..innerCreate a span and prepend it into every .inner element.
// <div class="container">
// <h2>Greetings</h2>
// <div class="inner">Hello</div>
// <div class="inner">Goodbye</div>
// </div>
$("<span> Test </span>").prependTo(".inner");$("<span>…") builds a new node..inner divs resolve..inner.<h2>Relocate an existing heading into a container as the first child.
// Start: h2 is a sibling above .container
$("h2").prependTo($(".container"));
// Result: h2 is first child inside .container$("h2") already exists in the page.h2 becomes the first child inside .container.prependTo vs prependSame first-child result; pick the syntax that matches how you think.
// Content first — build, then place
$("<li>").text("New").prependTo("#list");
// Container first — same DOM result
$("#list").prepend($("<li>").text("New"));.text() sets item text without HTML injection.prependTo reads naturally when the node is ready first.prepend reads naturally when the list is already selected.New as the first child of #list.Check these before using .prependTo() in real pages.
prependTo goes inside the target. For a sibling above, use .insertBefore().
Existing elements leave their old spot. Multiple targets clone except for the last.
Unlike .prepend(), build dynamic content first, then call prependTo.
Prefer .text() for user strings. Never inject raw markup from URLs or forms.
.prependTo() is a core jQuery method (since 1.0). It needs a browser DOM with jQuery loaded. Return-value chaining for single-target inserts is solid since 1.9.
Works in Chrome, Firefox, Safari, Edge, and other browsers with jQuery. Not for Node.js without a DOM.
Bottom line: Use .prependTo(target) in the browser for content-first first-child insertion. Prefer jQuery 1.9+ when chaining on the inserted set.
| Approach | Cost | Best for |
|---|---|---|
.prependTo(one) | Low | Single first-child insert / move |
.prependTo(many) | Higher | Clones per extra target — expect more work |
Native Element.prepend | Lowest | Hot paths without jQuery |
Prefer one clear insert over many tiny DOM moves in a loop. Batch when you can, and avoid inserting untrusted HTML strings.
.prepend().One line: $(content).prependTo(target) puts nodes at the top inside the target — content-first twin of .prepend().
Learn how to get and set text content on matched elements.
9 people found this page helpful