JavaScript code for adding new elements in a dynamic way
Last Updated :
21 Sep, 2021
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:
Similar Reads
How to dynamically create new elements in JavaScript ? New elements can be dynamically created in JavaScript with the help of createElement() method. The attributes of the created element can be set using the setAttribute() method. The examples given below would demonstrate this approach. Example 1: In this example, a newly created element is added as a
4 min read
How to create an element from a string in JavaScript ? In this article, we will learn how to create an element from a string using JavaScript. This can be used in situations where dynamically generated elements are required by the user. This can be achieved using many approaches as given below: Table of Content Using the createElement() methodUsing the
3 min read
JavaScript adding a class name to the element In JavaScript, adding a class name to an element allows you to style or manipulate it via CSS or JavaScript. This can be achieved using different methods. Here, we'll explore two common approaches: using the .className property and the .add() method.Below are the different approaches that could be u
3 min read
How to add HTML elements dynamically using JavaScript ? We learn how to add HTML elements dynamically using JavaScript. A basic understanding of HTML, CSS, and JavaScript is required. Here we are going to use a button and by clicking this button, we can add an HTML element dynamically in this example. Below are the approaches used to add HTML elements dy
2 min read
How to Dynamically Add Elements to a ListView in Android? ListView is a UI widget in android which is used in most android applications. We can display the list of data using the list view. We can dynamically add or remove items from the list view by performing some operations of the list. In this article, we will take a look at How to add Elements to a Li
4 min read
How to Create Dynamic Values and Objects in JavaScript? In JavaScript, you can choose dynamic values or variable names and object names and choose to edit the variable name in the future without accessing the array, Dynamic values and objects in JavaScript allow changing, accessing, or creating values and object properties at runtime for flexibility and
3 min read