How to create a new div on Click button using javascript

How to create a new div on Click button using javascript.

 

In this article, we have to learn about javascript. How to create a new div on Click button using javascript. And understand how it works with examples of the code.

Let’s see the example:- 

We need to create the HTML page. One you have created HTML file copy and paste code in your HTML file, after that run the HTML file on the browser.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Create New Div</title>

</head>

<body>

<div class="container">

   <h1>How to create new div on Click button use javascript.</h1>

   <button onclick="createDiv()">Create New Div</button>

   <span id="createDivBox"></span>

</div>

<script>

function createDiv() {

     // Create an "div" node:

     const node = document.createElement("div");

     // Create a text node:

     const textnode = document.createTextNode("Hi I am new Child");

     // Append the text node to the "div" node:

     node.appendChild(textnode);

     // Append the "div" node to the list:

     document.getElementById("createDivBox").appendChild(node);

}

</script>

</body>

 

How to create a new div on Click button using javascript.