prepend()?.prepend(content) inserts content as the first child inside each matched element (since jQuery 1.0). To insert as the last child, use .append().
$("p").prepend("<b>Hello </b>")
$(".inner").prepend("<span> Test </span>")
$(".container").prepend($("h2")) // move existing node
// same result, reversed syntax:
$("<span> Test </span>").prependTo(".inner")
// first child inside — not a sibling
// (sibling above = .before)| Need | Use |
|---|---|
| First child inside | $(target).prepend(content) |
| Last child inside | .append() |
| Content first | .prependTo() |
| Sibling above (outside) | .before() |
prepend()Select the container, pass content (or a callback), insert at the top.
prepend returns the originals.| Piece | Required? | Role |
|---|---|---|
| jQuery collection | Yes | Container(s) to insert into |
content / function | Yes | What goes in as the first child |
| Return | — | Same matched set (chainable) |
for each container in matched set:
place content as first child inside container
if content is an existing node and many containers:
clone for all but the last container
move original into the last container
// Official idea:
$(".inner").prepend("<span> Test </span>")
$(".container").prepend($("h2")) // move, not clone (one target)
// Reversed twin:
content.prependTo(target) ≡ target.prepend(content)Keep these facts handy while inserting at the top.
| Topic | Detail |
|---|---|
| Syntax | .prepend(content) / .prepend(fn) |
| Since | 1.0 (callback since 1.4) |
| Position | First child inside the target |
vs .append() | Top vs bottom inside |
vs .prependTo() | Container-first vs content-first |
| One target | Existing nodes move |
| Many targets | Clones except for the last |
Run official-style prepend actions on a tiny demo tree and see the first-child order change.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Insert a bold greeting as the first child of every paragraph.
// <p>there, friend!</p><p>amigo!</p>
$("p").prepend("<b>Hello </b>");<p> elements match.<b>Hello </b>.Prepend an existing heading into a container — jQuery moves it.
// <h2>Greetings</h2>
// <div class="container">
// <div class="inner">Hello</div>
// <div class="inner">Goodbye</div>
// </div>
$(".container").prepend($("h2"));.container will receive the heading.$("h2") is already in the page.h2 leaves its old spot.Return different first-child content for each matched element.
// <div class="box">A</div><div class="box">B</div>
$(".box").prepend(function (index, oldHtml) {
return "<strong>#" + (index + 1) + " </strong>";
});.box.0 — we show #1, #2.prepend vs appendSame container; first child vs last child.
// <ul id="list"><li>middle</li></ul>
$("#list").prepend("<li>top</li>");
$("#list").append("<li>bottom</li>");top becomes the first child.bottom becomes the last child.Check these before using .prepend() in real pages.
prepend goes inside. For a sibling above the element, use .before().
Existing elements leave their old spot. Multiple targets clone except for the last.
Prefer .text() for user strings, or sanitize before prepending markup.
$("#feed").prepend(html). Content-first style is .prependTo().
.prepend() is a core jQuery method (since 1.0; callback since 1.4). It needs a browser DOM with jQuery loaded.
Works in Chrome, Firefox, Safari, Edge, and other browsers with jQuery. Not for Node.js without a DOM.
Bottom line: Use .prepend(content) in the browser to insert as the first child. Prefer .text() for untrusted strings.
| Approach | Cost | Best for |
|---|---|---|
.prepend(html) | Low | Single inserts / small feeds |
.prepend many times in a loop | Higher | Avoid — batch or build a fragment first |
Native Element.prepend | Lowest | Hot paths without jQuery |
Prefer one clear prepend over many tiny DOM writes in a tight loop. Build markup once when inserting several siblings at the top.
.prependTo() is content-first syntax.One line: $(target).prepend(content) puts new nodes at the top inside the target — the opposite of .append().
Learn the content-first syntax that inserts into a target as the first child.
9 people found this page helpful