JavaScript before() - Insert a Node Before an Element

Summary: in this tutorial, you’ll learn how to use the JavaScript before() method to insert a node before an element.

Introduction to the JavaScript before() method #

The element.before() method allows you to insert one or more nodes before the element. The following shows the syntax of the before() method:

Element.before(node)

In this syntax, the before() method inserts the node before the Element in the DOM tree.

For example, suppose you have a <p> element and you want to insert a <h1> element before it, you can use the before() method like this:

p.before(h1)

To insert multiple nodes before an element, you pass the nodes to the before() method as follows:

Element.before(node1, node2, ... nodeN)

Also, the before() method accepts one or more strings rather than nodes. In this case, the before() method treats the strings as Text nodes:

Element.before(str1, str2, ... strN)

The before() method returns undefined. If a node cannot be inserted, the before() method throws a HierarchyRequestError exception.

JavaScript before() examples #

Let’s take some examples of using the JavaScript before() method.

1) Using JavaScript before() to insert a node before an element #

The following example uses the before() method to insert a <h1> before a paragraph:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript DOM - before()</title>
    </head>

    <body>

        <p>This is JavaScript DOM before() method demo.</p>

        <script>
            const p = document.querySelector('p');

            // create a new h1 element
            const h1 = document.createElement('h1');
            h1.innerText = 'JavaScript DOM - before()';

            // insert the h1 before the paragraph
            p.before(h1);
        </script>
    </body>

</html>

How it works.

First, get the <p> element using the querySelector() method:

const p = document.querySelector('p');

Second, create a new heading element and set its innerText:

const h1 = document.createElement('h1');
h1.innerText = 'JavaScript DOM - before()';

Third, insert the <h1> element before the paragraph element:

p.before(h1);

2) Using JavaScript before() to insert multiple nodes before an element #

The following example uses the before() method to insert multiple nodes before an element:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript DOM - before()</title>
    </head>

    <body>
        <ul>
            <li>Angular</li>
            <li>Vue</li>
        </ul>
        <script>
            const list = document.querySelector('ul');

            const libs = ['React', 'Meteor', 'Polymer'];
            const items = libs.map((lib) => {
                const item = document.createElement('li');
                item.innerText = lib;
                return item;
            });

            list.firstChild.before(...items);

        </script>
    </body>

</html>

How it works:

First, select the ul element using the querySelector() method:

const list = document.querySelector('ul');

Second, define an array of strings. In practice, you may get it from an API call.

const libs = ['React', 'Meteor', 'Polymer'];

Third, transform the array of strings into an array of li elements using the map() method:

const items = libs.map((lib) => {
  const item = document.createElement('li');
  item.innerText = lib;
  return item;
});

Finally, insert the list item elements before the first child of the ul element:

list.firstChild.before(...items);

Note that the ...items uses the spread operator to spread out the element of the items array.

The <ul> element will look like the following:

<ul>
    <li>React</li>
    <li>Meteor</li>
    <li>Polymer</li>
    <li>Angular</li>
    <li>Vue</li>
</ul>

The first three items (React, Meteor, and Polymer) were inserted before the item Angular, which was the first child of the <ul> element.

3) Using JavaScript before() to insert strings #

When you use strings in the before() method, the before() method will treat them as Text nodes. For example:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript DOM - before()</title>
        <style>
            button {
                padding: 0.75em 1em;
                background-color: #F7DF1E;
                color: #000;
                cursor: pointer;
                border-radius: 50vw;
            }
        </style>
    </head>

    <body>
        <button>Donate Here</button>
        <script>
            const button = document.querySelector('button');
            button.firstChild.before('🧡 ');

        </script>
    </body>

</html>

Summary #

Use the element.before() method to insert one or more nodes before the element.

Quiz #

Quiz

Understanding the before() Method

5 questions

Test your understanding of the before() method and its usage in JavaScript.

Was this helpful?