When you need to insert content at the top of an existing element without touching the HTML file, jQuery’s prepend() method is the fastest solution. Whether you are adding a notification banner, a dynamic header, or injecting new list items at the top of a feed – prepend() handles it in one clean line.
In this guide you will learn exactly how prepend() works, see real code examples, understand when to use it over append(), and find answers to the most common questions developers ask.
What is jQuery prepend()?
The prepend() method inserts content at the beginning – inside – a selected element. It is the opposite of append(), which adds content at the end.
Think of it this way:
Before prepend():
<div class="container">
<p>Existing content</p>
</div>
After prepend():
<div class="container">
<p>New content added here</p> ← prepended
<p>Existing content</p>
</div>The existing content stays — prepend() simply pushes new content above it inside the same container.
Basic jQuery prepend() Syntax
$(selector).prepend(content);The selector is any valid CSS selector – a class, ID, tag, or element. The content can be plain text, an HTML string, or a jQuery object.
Real Code Examples
Example 1 - Prepend a Simple Message
jQuery(document).ready(function($) {
$(".inner-container").prepend("<p>This message appears at the top.</p>");
});This runs after the page loads and inserts a paragraph at the very beginning of .inner-container.
Example 2 - Prepend a Full HTML Block
jQuery(document).ready(function($) {
$(".inner-container").prepend(
"<div class='hs-header-box'><p>Important Notice: Site is under maintenance.</p></div>"
);
});You can pass full HTML including classes, IDs, and nested elements – not just plain text.
Example 3 - Prepend a List Item Dynamically
jQuery(document).ready(function($) {
$("#my-list").prepend("<li>New item at the top</li>");
});Great for activity feeds, notification lists, and comment sections where new entries appear at the top.
Example 4 - Prepend Using a Variable
jQuery(document).ready(function($) {
var message = "<div class='alert'>New update available!</div>";
$(".container").prepend(message);
});Storing content in a variable keeps your code clean when the HTML string is long.
How jQuery prepend() Works Step by Step
- jQuery(document).ready(): waits for the full page to load before running
- $(selector): finds the target element on the page
- .prepend(content): inserts your HTML at the very beginning of that element
- Existing content shifts down: nothing is replaced or removed
jQuery prepend() vs append() - What's the Difference?
This is the most common question developers ask when learning these methods.
| Method | Inserts Content | Use When |
|---|---|---|
prepend() |
At the beginning of the element | New items should appear at the top |
append() |
At the end of the element | New items should appear at the bottom |
This is the most common question developers ask when learning these methods.
// prepend — adds at the top
$(".list").prepend("<li>First item</li>");
// append — adds at the bottom
$(".list").append("<li>Last item</li>");Use prepend() for notifications, alerts, and newest-first feeds. Use append() for loading more content, chat messages, and oldest-first lists.
When to Use jQuery prepend()
- Adding a site-wide notification bar without editing every HTML file
- Injecting a warning or alert at the top of a form
- Dynamically inserting the latest post or product at the top of a list
- Adding a custom header inside a third-party widget you cannot edit directly
- WordPress customizations where you want to add content above post content without modifying the theme template
Does Your Site Need jQuery Loaded?
Yes. prepend() is a jQuery method — your page must load the jQuery library before your script runs.
WordPress loads jQuery by default, so if you are working in WordPress you are already covered. For non-WordPress sites, add this in your HTML head before your script:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>Frequently Asked Questions
What is the difference between prepend() and prependTo()?
Both do the same thing but the syntax is reversed. $(".box").prepend(content) and $(content).prependTo(".box") produce identical results. Use whichever reads more naturally in your code.
Does prepend() replace existing content?
No. prepend() inserts new content at the beginning of the selected element without removing or replacing what is already there. If you want to replace content entirely, use html() instead.
Can I prepend multiple elements at once?
Yes. Pass multiple arguments separated by commas or pass a full HTML string with multiple elements wrapped in a parent div.
Does prepend() work without jQuery?
Not directly. The vanilla JavaScript equivalent is element.insertAdjacentHTML('afterbegin', content) which works without any library.
Can I use prepend() in WordPress?
Yes. WordPress loads jQuery by default. Wrap your code in jQuery(document).ready(function($){}) and enqueue your script properly via functions.php or a custom plugin.
Conclusion
jQuery prepend() is one of those methods you will reach for again and again – simple syntax, predictable behavior, and works anywhere jQuery is loaded. Use it to inject notifications, dynamic headers, or new list items at the top of any container without touching your HTML structure.
If you are building or customizing a WordPress site, check out our guide on adding a custom cursor with the Smooth Custom Cursor plugin and our free online code editor to test your jQuery snippets directly in the browser.
