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 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;" > w3wiki </ 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:
Contact Us