JavaScript prepend() Method

The JavaScript prepend() method inserts one or more nodes or strings at the beginning of a parent element’s child list. It is a useful DOM manipulation method when you need to add new content before existing elements without removing or replacing them.

Unlike the append() method, which adds content at the end, prepend() places the supplied content before the first child of the selected parent element.

JavaScript prepend() Method Syntax

The syntax of the prepend() method is:

parentElement.prepend(node1, node2, ..., nodeN);

Parameters:

• node1, node2, ..., nodeN: One or more DOM nodes or strings to insert at the beginning of the parent element.

Return value:

The prepend() method returns undefined.

Basic Example of JavaScript prepend()

The following example demonstrates how to insert text at the beginning of an HTML element.

<div id="container">
    <p>Existing content</p>
</div>

<script>
const container = document.getElementById("container");

container.prepend("New content ");

console.log(container.textContent);
</script>

Output:

New content Existing content

The text is inserted before the existing paragraph.

JavaScript prepend() to Add an HTML Element

You can create a new HTML element with document.createElement() and insert it at the beginning of a parent element using prepend().

<div id="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
</div>

<script>
const container = document.getElementById("container");

const newElement = document.createElement("h2");

newElement.textContent = "Welcome to JavaScript";

container.prepend(newElement);
</script>

The new heading is inserted before the first paragraph.

Resulting HTML:

<div id="container">
    <h2>Welcome to JavaScript</h2>
    <p>First paragraph</p>
    <p>Second paragraph</p>
</div>

JavaScript prepend() with Multiple Elements

The prepend() method accepts multiple arguments. You can insert several nodes and strings in a single method call.

<div id="list">
    <p>Existing item</p>
</div>

<script>
const list = document.getElementById("list");

const first = document.createElement("p");
first.textContent = "First item";

const second = document.createElement("p");
second.textContent = "Second item";

list.prepend(first, second, "New text");
</script>

The supplied items are inserted in the same order at the beginning of the parent element.

JavaScript prepend() with Text Nodes

You can use document.createTextNode() to create a text node and insert it before the existing child nodes.

<div id="message">
    <strong>JavaScript Tutorial</strong>
</div>

<script>
const message = document.getElementById("message");

const textNode = document.createTextNode("Learn ");

message.prepend(textNode);
</script>

Resulting HTML:

<div id="message">
    Learn <strong>JavaScript Tutorial</strong>
</div>

JavaScript prepend() with innerHTML

The prepend() method treats string arguments as text, not HTML markup. If you pass an HTML string directly, the browser inserts it as text.

const container = document.getElementById("container");

container.prepend("<strong>Hello</strong>");

This displays the characters <strong>Hello</strong> as text rather than creating a bold element.

To insert actual HTML elements, create them with DOM methods:

const container = document.getElementById("container");

const strong = document.createElement("strong");
strong.textContent = "Hello";

container.prepend(strong);

Avoid using innerHTML with untrusted user input because it can introduce cross-site scripting (XSS) vulnerabilities.

JavaScript prepend() vs append()

Both prepend() and append() insert content inside an existing parent element, but they insert it at different positions.

Example:

<div id="demo">
    <p>Existing content</p>
</div>

<script>
const demo = document.getElementById("demo");

demo.prepend("Start: ");
demo.append(" :End");
</script>

Result:

Start: Existing content :End

JavaScript prepend() vs prependChild()

There is no standard DOM method named prependChild(). The commonly used alternative is prepend() or insertBefore().

The prepend() method accepts both nodes and strings, while insertBefore() inserts a node before a specified reference child.

const container = document.getElementById("container");

const newElement = document.createElement("p");
newElement.textContent = "New paragraph";

// Using prepend()
container.prepend(newElement);

The equivalent operation using insertBefore() is:

const container = document.getElementById("container");

const newElement = document.createElement("p");
newElement.textContent = "New paragraph";

container.insertBefore(newElement, container.firstChild);

Both examples insert the new paragraph before the first child.

JavaScript prepend() with an Existing Element

If you prepend a node that already exists elsewhere in the document, the browser moves that node from its original position to the beginning of the new parent.

<div id="first">
    <p id="item">Move this paragraph</p>
</div>

<div id="second">
    <p>Second container</p>
</div>

<script>
const item = document.getElementById("item");
const second = document.getElementById("second");

second.prepend(item);
</script>

The paragraph is moved from the first container to the beginning of the second container. It is not duplicated.

Browser Support for JavaScript prepend()

The prepend() method is supported by modern browsers and is part of the DOM API. It is available on Element, Document, and DocumentFragment objects through the ParentNode interface.

For older browsers that do not support prepend(), you can use insertBefore() as an alternative:

function addAtBeginning(parent, node) {
    parent.insertBefore(node, parent.firstChild);
}

const container = document.getElementById("container");

const paragraph = document.createElement("p");
paragraph.textContent = "New paragraph";

addAtBeginning(container, paragraph);

This inserts the new node before the first child of the parent element.