Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to get a notification when an element is added to the page using JavaScript ?

  • Last Updated : 12 May, 2021

To show a notification when an element is added to page we can use createElement() method creates an element list with the specified name. After that, we will create a text node by createTextNode() method.Then we will append the new element in that list and use the alert() function to show a notification to the user. 

Below example illustrate the approach:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Example: In this example, we already have a list so we want another element in that list, but when we want to add an element in that list, we will show a notification alert when we click the button to add an element in that list.

HTML




<!DOCTYPE html>
<html>
    <head>
        <script>
            function add() {
                 
                // Add li element
                var node = document
                .createElement("li");
                 
                // Add element into the list
                var textnode = document
                .createTextNode("JS");
                 
                // Append the element into the list
                node.appendChild(textnode);
                document.getElementById("myList")
                .appendChild(node);
                 
                // Alert message when element gets added
                alert("Element is getting added") ;    
            }
        </script>
    </head>
    <body>
            <h1 style="color: green;">
                GeeksforGeeks
            </h1>
            <b>
                Click the button to append an item
                to the end of the list.
            </b>
            <ul id="myList">
                <li>HTML</li>
                <li>CSS</li>
            </ul>
            <br>
            <button onclick="add()">
                Add Elements
            </button>
    </body>
</html>

Output: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!