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;"> neveropen </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:
