JavaScript element.prepend()
last modified April 2, 2025
In this article, we explore the element.prepend() method in
JavaScript. This method is essential for DOM manipulation, allowing developers
to insert nodes at the beginning of a parent element's child list.
Basic Definition
The element.prepend() method inserts a set of Node objects or
DOMString objects before the first child of the element. It modifies the DOM
by adding content at the start of the selected element.
Unlike append() which adds content at the end,
prepend() adds content at the beginning. It can accept multiple
arguments and automatically converts strings to Text nodes.
Basic prepend() Usage
This example demonstrates how to prepend a simple text node to an element.
<!DOCTYPE html>
<html>
<head>
<title>Basic prepend()</title>
</head>
<body>
<div id="container">
<p>Existing paragraph</p>
</div>
<script>
const container = document.getElementById('container');
container.prepend('Prepended text ');
</script>
</body>
</html>
In this basic example, we have a div with an existing paragraph. The JavaScript code prepends a text string before the paragraph. The string is automatically converted to a Text node.
This demonstrates the fundamental usage of prepend() to add
content at the beginning of an element. The method is called on the parent
element where we want to insert content.
Prepending Multiple Elements
This example shows how to prepend multiple elements at once using prepend().
<!DOCTYPE html>
<html>
<head>
<title>Prepending Multiple Elements</title>
</head>
<body>
<ul id="list">
<li>Original item</li>
</ul>
<script>
const list = document.getElementById('list');
const newItem1 = document.createElement('li');
newItem1.textContent = 'First new item';
const newItem2 = document.createElement('li');
newItem2.textContent = 'Second new item';
list.prepend(newItem1, newItem2);
</script>
</body>
</html>
Here we have a ul element with one li item. We create two new li elements and prepend them both at once. The elements appear in the order they were passed.
This demonstrates how prepend() can accept multiple arguments. The
method inserts them sequentially before any existing children of the parent.
Prepending with Strings and Elements
This example demonstrates mixing strings and elements when using prepend().
<!DOCTYPE html>
<html>
<head>
<title>Mixed prepend</title>
</head>
<body>
<div id="content">
<p>Original content</p>
</div>
<script>
const content = document.getElementById('content');
const heading = document.createElement('h2');
heading.textContent = 'New Heading';
content.prepend('Text before heading ', heading, ' Text after heading');
</script>
</body>
</html>
In this example, we prepend a combination of text strings and an element. The strings are converted to Text nodes and inserted along with the heading element.
This shows the flexibility of prepend() in handling different
types of content. The method maintains the order of arguments in the DOM.
Prepending in Response to Events
This example shows how to use prepend() in an event handler.
<!DOCTYPE html>
<html>
<head>
<title>Event-driven prepend</title>
</head>
<body>
<div id="log"></div>
<button id="addBtn">Add Log Entry</button>
<script>
const log = document.getElementById('log');
const btn = document.getElementById('addBtn');
btn.addEventListener('click', () => {
const entry = document.createElement('div');
entry.textContent = `Log entry at ${new Date().toLocaleTimeString()}`;
log.prepend(entry);
});
</script>
</body>
</html>
Here we have a log container and a button. Each button click prepends a new log entry with a timestamp. This creates a chronological log with newest entries first.
This demonstrates a practical use case for prepend() where you want
to maintain reverse chronological order. The method is ideal for such scenarios.
Prepending with DocumentFragment
This example demonstrates using DocumentFragment with prepend() for better performance.
<!DOCTYPE html>
<html>
<head>
<title>Prepend with DocumentFragment</title>
</head>
<body>
<div id="container">
<p>Original content</p>
</div>
<script>
const container = document.getElementById('container');
const fragment = document.createDocumentFragment();
const heading = document.createElement('h1');
heading.textContent = 'Main Title';
fragment.appendChild(heading);
const subheading = document.createElement('h2');
subheading.textContent = 'Subtitle';
fragment.appendChild(subheading);
container.prepend(fragment);
</script>
</body>
</html>
In this example, we create a DocumentFragment to hold multiple elements before prepending them all at once. This is more efficient than multiple DOM operations.
DocumentFragment is a lightweight container that doesn't trigger reflows until its contents are added to the DOM. This makes it ideal for batch operations.
Source
MDN Element.prepend() Documentation
In this article, we have shown how to use element.prepend()
in JavaScript. This method is powerful for DOM manipulation and element
insertion at the beginning of parent elements.
Author
List all JS DOM tutorials.