The JavaScript prepend() method
The prepend() method adds one or more nodes or text strings to the start of an element's children. list.prepend(newItem) puts newItem first. It's the front-insert counterpart of append(), accepts multiple arguments and plain strings, and replaces the older insertBefore() for this job.
Overview
prepend() inserts content at the beginning of an element, inside it: the mirror image of append(), which adds to the end. feed.prepend(newPost) puts the new post at the top, exactly what you want for a newest-first list, a new chat message, or a freshly added notification.
Like append(), it's flexible: it takes multiple arguments at once, and those can be strings as well as nodes. Strings are inserted as plain text (not parsed as HTML), so it's safe with user input, unlike innerHTML. It returns undefined.
It replaced the clumsier old idiom parent.insertBefore(node, parent.firstChild), which needed a reference to the first child. The related insert methods round out the set: append() for the end, before()/after() for outside the element. For building many nodes efficiently, assemble them in a DocumentFragment first.
Syntax
parent.prepend(node)
parent.prepend(node1, node2, "text") // multiple, mixed
const li = document.createElement("li");
list.prepend(li); // li becomes the first childParameters
The prepend() method accepts the following parameters.
| Parameter | Description |
|---|---|
nodes/strings |
One or more nodes or strings to add at the start. Strings are inserted as plain text (not HTML). |
Example
<ul id="feed" style="font:15px system-ui">
<li>Older item</li>
</ul>
<button onclick="addNewest()" style="font:14px system-ui;margin-top:8px">Add newest on top</button>
<script>
let n = 0;
function addNewest() {
const li = document.createElement('li');
li.textContent = 'Newest item ' + (++n);
document.getElementById('feed').prepend(li);
}
</script>Best practices
- Use
prepend()for newest-first lists and inserting at the top. - Pass strings for text: inserted safely, not parsed as HTML.
- Use append() for the end,
before()/after()for outside the element. - It replaces the older
insertBefore(node, firstChild)pattern.
Frequently asked questions
What does prepend() do?
What is the difference between prepend() and append()?
prepend() inserts at the start; append() inserts at the end. Both accept multiple nodes and strings.How do I add an element to the top of a list?
list.prepend(element), which makes it the first child.