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:

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>