In this article, we will understand how to add a new element to HTML DOM in JavaScript. Adding new elements to the DOM is a fundamental part of building dynamic web applications. Developers can create real-time interactive web pages without having to reload the entire page.
DOM (Document Object Model) in JavaScript means allowing programmers to access and update the content, structure, and style of a document.
Adding a new element to HTML DOM in JavaScript
There are several methods to add a new element to HTML DOM in JavaScript which are as follows:
Using createElement :
The document.createElement() is a method used to create the HTML element. This method is used to create a new element and then insert it into DOM for users.
Syntax:
let newElement = document.createElement('newElementName');
Here, newElementName is basically the parameter of any HTML tag type.
Through example, it will be more clear,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding a new element</title>
</head>
<body style="background-color: #212121; color: #fff;">
</body>
<script>
const div = document.createElement('div');
console.log(div);
div.style.backgroundColor = 'lightgreen';
div.style.padding = '20px';
div.style.color = 'black';
div.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at nisl nec sapien volutpat varius sit amet vel risus. Suspendisse potenti. Nam luctus, justo ut fringilla luctus, orci ligula sollicitudin libero, nec blandit nisi metus vitae ipsum. Vivamus pellentesque, odio id volutpat interdum, lorem ligula accumsan lorem, et aliquet erat elit non odio. Phasellus hendrerit, nulla in tristique vehicula, arcu nisi dictum nibh, ut pharetra velit nulla eget eros. Duis vehicula nulla id efficitur fringilla. Nullam feugiat, nunc vel aliquam pharetra, tellus sapien tincidunt est, sed pellentesque erat metus ac elit.';
document.body.appendChild(div);
</script>
</html>
This is how an element is created in HTML DOM.
Now the second way to add a new element is by using innerHTML.
Using innerHTML :
This method is used to add new content to HTML DOM. It allows to get or set the HTML new content inside the element. This method involves setting the innerHTML of an existing element to include the HTML markup for the new element.
Syntax :
element.innerHTML = htmlString;
let content = element.innerHTML;
Example of the above method,
<!DOCTYPE html>
<html>
<head>
<title>Add Input Element to DOM</title>
</head>
<style>
h1 {
color: rgb(84, 78, 78);
}
#container {
text-align: center;
}
button {
cursor: pointer;
}
</style>
<body>
<div id="container">
<h1>Coding ninja</h1>
<h4>Using innerHTML</h4>
<button onclick="addInputElement()">Add Input Element</button>
</div>
<script>
function addInputElement() {
const container = document.getElementById('container');
container.innerHTML += '<input type="text"placeholder = "Enter text..." > ';
}
</script>
</body>
</html>
The above example helps to understand the usage of methods while creating a new element. Adding new elements dynamically to the DOM is a really powerful technique that makes web pages interactive and responsive.