JavaScript - after() method

revision: February 13, 2024

Category : element

The Element.after() method inserts a set of Node or string objects in the children list of the Element's parent, just after the Element. String objects are inserted as equivalent Text nodes.

Syntax :

        after(node1)
        after(node1, node2)
        after(node1, node2, /* … ,*/ nodeN)

Parameters:

node1,...,nodeN : a set of Node or string objects to insert.

Examples:

            <script>
                    let container = document.createElement("div");
                    let p = document.createElement("p");
                    container.appendChild(p);
                    let span = document.createElement("span");
                    p.after(span);
                    console.log(container.outerHTML);
                    // "<div><p></p><span></span></div>"
            </script>

            <script>
               let container = document.createElement("div");
                let p = document.createElement("p");
                container.appendChild(p);
                p.after("Text");
                console.log(container.outerHTML);
                // "<div><p></p>Text</div>"
            </script>

Practical examples

example: using JavaScript after() to insert a node after an element

JavaScript DOM - after()

code:

                    <div>
                        <h4>JavaScript DOM - after()</h4>
                    </div>
                    <script>
                        const h4 = document.querySelector('h4');
                        // 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
                        h4.after(p);
                        
                    </script>

example: using JavaScript after() to insert multiple nodes after an element

Angular
Vue

code:

                    <div>
                        <ul>
                            <li>Angular</li>
                            <li>Vue</li>
                        </ul>
                    </div>
                    <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>

example: using JavaScript after() to insert strings

code:

                    <div>
                        <button>Donate Here</button>
                    </div>
                    <style>
                        button {padding: 0.75vw 1vw; background-color: #F7DF1E; color: #000; cursor: pointer; border-radius: 50vw;}
                    </style>
                    <script>
                        const button = document.querySelector('button');
                        button.firstChild.after(' 🧡');
                        
                    </script>