How to append data to <div> element using JavaScript ?

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

Last Updated : 24 Jun, 2024

To show a notification when an element is added to the page we can use the to createElement() method to create an element list with the specified name. Detect element addition dynamically in the DOM using JavaScript. Trigger an alert to notify users upon appending new elements to the page.

Approach

The JavaScript function add() is defined to handle the process of adding an <li> element to the DOM when invoked by clicking a button.
Inside the function, a new <li> element is dynamically created using document.createElement("li").
A text node containing the string "JS" is created using document.createTextNode("JS").
The text node is appended as a child of the <li> element, and then the <li> element is appended to an existing <ul> list with the id "myList".
After the element is appended, an alert message is triggered using an alert("Element is getting added"), notifying the user that an element has been added to the page.

Example: The example below shows the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button to append an item
        to the end of the list</title>
</head>

<body>
    <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>
    <script>
        function add() {

            // Add li element 
            let node = document
                .createElement("li");

            // Add element into the list
            let 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>
</body>

</html>

Output:

addelementgif

How to append data to <div> element using JavaScript ?

romy421kumari

Improve

Article Tags :

Similar Reads

How to append data to <div> element using JavaScript ?

To append the data to <div> element we have to use DOM(Document Object Model) manipulation techniques. The approach is to create a empty <div> with an id inside the HTML skeleton. Then that id will be used to fetch that <div> and then we will manipulate the inner text of that div.

How to Display Hidden Element when a user Starts Typing using JavaScript?

To display a hidden element when typing starts, use JavaScript event listeners like keyup or input. These events detect typing in an input field and trigger the visibility of hidden elements.Below are the approaches to display hidden elements on typing using JavaScript:Table of ContentUsing oninput

How to detect when the window size is resized using JavaScript ?

Sometimes when we develop our site, we want to detect the size of the window, In this article, we are going to learn how to detect when the window size is resized using JavaScriptThe window resize event occurs whenever the size of the browser window gets changed. We can listen to the resize event in

How to dynamically change the title of web page using JavaScript ?

Dynamically changing the title of a webpage using JavaScript refers to updating the content of the `<title>` element in the HTML document without reloading the page. This allows developers to modify the page title based on user interaction or other conditions in real-time.For changing the page

How to Add an ID to Element in JavaScript ?

In JavaScript, the ID is the unique identifier through which the elements can be identified and manipulated if required. We can add an ID to an element in JavaScript using various approaches that are explored in this article with practical demonstration. Below are the possible approaches: Table of C

Which event occurs when a value is added to an input box in JavaScript?

JavaScript has events to provide a dynamic interface to a webpage. These events are hooked to elements in the Document Object Model (DOM). These events by default use bubbling propagation i.e, upwards in the DOM from children to parent. We can bind events either as inline or in an external script. T

How to add content in <head> section using jQuery/JavaScript?

Any content can be added to the <head> section using the following two approaches:Using the document.head propertySelecting the head element using jQueryMethod 1: Using the document.head property.The head property of the document returns the head element of the document. Any new content can be

How to run a function when the page is loaded in JavaScript ?

A function can be executed when the page loads successfully. This can be used for various purposes like checking for cookies or setting the correct version of the page depending on the user's browser. Below are the approaches to run a function when the page is loaded in JavaScript: Table of Content

How to make a Toast Notification in HTML CSS and JavaScript ?

A Toast Notification is a small, non-intrusive popup message that briefly appears on the screen to provide feedback or updates. It features 4 distinct toast types triggered by buttons: "Submit" for a green "Success" toast, each with unique CSS animations. JavaScript manages their display duration. T

How to get the outer html of an element using jQuery ?

Sometimes, there is a need to get the entire HTML element by its id and not merely its contents, for doing so, we shall use the HTML DOM outerHTML Property to get the outer HTML of HTML element. Syntax: document.getElementById("your-element-id").outerHTML) You can use a variable and initialize it to