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

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 elemet 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.