JavaScript after(): Insert a Node After an Element

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

Introduction to the JavaScript after() method

The after() is a method of the Element type. The element.after() method allows you to insert one or more nodes after the element.

Here’s the syntax of the after() method:

Element.after(node)Code language: JavaScript (javascript)

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

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

h1.after(p)Code language: JavaScript (javascript)

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

Element.after(node1, node2, ... nodeN)Code language: JavaScript (javascript)

The after() method also accepts one or more strings. In this case, the after() method treats the strings as Text nodes:

Element.after(str1, str2, ... strN)Code language: JavaScript (javascript)

The after() method returns undefined. If a node cannot be inserted, it’ll throw a HierarchyRequestError exception.

JavaScript after() examples

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

1) Using JavaScript after() to insert a node after an element

The following example uses the after() method to insert a paragraph after a <h1> 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 - after()</title>
    </head>

    <body>
        <h1>JavaScript DOM - after()</h1>

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

            // create a new paragraph element
            const p = document.createElement('p');
            p.innerText = 'This is JavaScript DOM after() method demo';

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

</html>Code language: HTML, XML (xml)

How it works.

First, get the heading element using the querySelector() method:

 const h1 = document.querySelector('h1');Code language: JavaScript (javascript)

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

const p = document.createElement('p');
p.innerText = 'This is JavaScript DOM after() method demo';Code language: JavaScript (javascript)

Third, insert the <p> element after the <h1> element:

h1.after(p);Code language: JavaScript (javascript)

2) Using JavaScript after() to insert multiple nodes after an element

The following example uses the after() method to insert multiple nodes after 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 - after()</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.lastChild.after(...items);

        </script>
    </body>
</html>Code language: HTML, XML (xml)

How it works:

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

 const list = document.querySelector('ul');Code language: JavaScript (javascript)

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

 const libs = ['React', 'Meteor', 'Polymer'];Code language: JavaScript (javascript)

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;
});Code language: JavaScript (javascript)

Finally, insert the list item elements after the last child of the ul element:

list.lastChild.after(...items);Code language: JavaScript (javascript)

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>Angular</li>
    <li>Vue</li>
    <li>React</li>
    <li>Meteor</li>
    <li>Polymer</li>
</ul>Code language: HTML, XML (xml)

The last three items (React, Meteor, and Polymer) were inserted after the item Vue, which was the last child of the <ul> element.

3) Using JavaScript after() to insert strings

When you use strings in the after() method, it 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 - after()</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.after(' 🧡');

        </script>
    </body>
</html>Code language: HTML, XML (xml)

Summary

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

Was this tutorial helpful ?