Javascript is a very important language when it comes to learning how the browser works. Often there are times we would like to add dynamic elements/content to our web pages. This post deals with all of that.
Creation of new element: New elements can be created in JS by using the createElement() method.
Syntax:
document.createElement("<tagName>");
// Where <tagName> can be any HTML
// tagName like div, ul, button, etc.
// newDiv element has been created
For Eg: let newDiv = document.createElement("div");
Once the element has been created, let’s move on to the setting of attributes of the newly created element.
Setting the attributes of the created element: Attributes can be set using setAttribute() method.
The syntax and example are as follows:
Element.setAttribute(name, value);
// Where Element is the name of web element.
// Here, we have created newDiv.
// Where name is the attribute name and
// value is the value that needs to be set
For Eg: newDiv.setAttribute("class","container");
Example: Elements can be created based on some event like a click. Here’s an example of how to create elements dynamically with an onclick event. This code can be further made into a todo-list!
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <style> html, body { height: 100%; width: 100%; } .button { display: flex; align-items: center; justify-content: center; } .tasks { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 20px; } </style> </head> <body> <div class="button"> <button id="addTask">Add task</button> </div> <div class="tasks"></div> <script type="text/javascript"> // Getting the parent element in which // the new div will be created let task = document.getElementsByClassName("tasks"); // Getting the addTask button element let addTask = document.getElementById("addTask"); // Adding onclick event to the button addTask.addEventListener('click', function () { // Traversing through collection of HTML // elements (tasks here) for (let i = 0; i < task.length; i++) { // New div element is created let newDiv = document.createElement("div"); // Setting the attribute of class type to newDiv newDiv.setAttribute("class", "list"); // innerText used to write the text in newDiv newDiv.innerText = "New Div created"; // Finally append the newDiv to the // parent i.e. tasks task[i].append(newDiv); } }) </script> </body> </html> |
Output:
