How to use createElement In Javascript
In this approach, we are using the createElement() method which is used to dynamically create a new HTML element. This method allows developers to create new elements and then insert them into the DOM.
Syntax:
let newElement = document.createElement("elementName");
Example: The below example uses the createElement method to add a new element to HTML DOM.
<!DOCTYPE html>
<html>
<head>
<title>Add Element to DOM</title>
<style>
h1 {
color: green;
}
.container {
text-align: center;
}
.newDiv {
color: white;
height: 70px;
width: 150px;
background-color: green;
padding: 10px;
margin-top: 10px;
margin-left: 40%;
}
</style>
</head>
<body>
<div class="container">
<h1>w3wiki</h1>
<h4>Using createElement</h4>
<button onclick="addNewElement()">
Add New Element</button>
</div>
<script>
function addNewElement() {
const newDiv = document
.createElement('div');
newDiv.classList.add('newDiv');
newDiv.textContent = 'This is a new div element';
document
.querySelector('.container')
.appendChild(newDiv);
}
</script>
</body>
</html>
Output:
How to Add a new Element to HTML DOM in JavaScript ?
Adding a new element to the HTML DOM dynamically using JavaScript is a common requirement in web development. This allows developers to create interactive and dynamic web pages without the need to reload the entire page.
There are several approaches to adding a new element to HTML DOM in JavaScript which are as follows:
Table of Content
- Using createElement
- Using innerHTML
Contact Us