Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to clear the content of a div using JavaScript?
We will learn to remove all child elements or content of a div element using JavaScript. However, whatever method we learn to clear the div element's content will work with any HTML element.
Removing the content of the div element is useful when users want to display some HTML content based on a particular condition or want to replace HTML content.
Here, we will explore three approaches to clear the content of a div using JavaScript.
Using the replaceChildren() Method
The replaceChildren() method allows developers to replace child elements of a particular HTML element. When called without parameters, it removes all child elements, effectively clearing the content.
Syntax
div.replaceChildren();
In the above syntax, div is an HTML element for which we want to clear the HTML content.
Example
In the example below, we have created a div element with some HTML content. The clearDiv() function accesses the div element using its id and invokes the replaceChildren() method to clear all content.
<html>
<head>
<style>
div {
font-size: 2rem;
height: 100px;
width: 600px;
border-radius: 20px;
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Using the <i>replaceChildren()</i> method to clear the div element using JavaScript</h2>
<div id="divElement">
Hello Users! <br> How are you?
</div><br>
<button onclick="clearDiv()">Clear all content of div</button>
<script>
function clearDiv() {
// Access the div element and use the replaceChildren() method to clear the div content
let div = document.getElementById("divElement");
div.replaceChildren();
}
</script>
</body>
</html>
Using the removeChild() Method with firstChild Property
The removeChild() method removes child elements of a particular HTML element. We use the firstChild property to check if the element contains any child elements and remove them one by one using a while loop.
Syntax
while (divElement.firstChild) {
divElement.removeChild(divElement.firstChild);
}
Example
In the example below, the div element contains three paragraph elements as child elements. The removeContent() function uses a while loop with firstChild property and removeChild() method to clear all content.
<html>
<head>
<style>
div {
font-size: 1rem;
height: 120px;
width: 600px;
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<h3>Using the removeChild() method and firstChild property to clear the div element</h3>
<div id="divElement">
<p>This is a first child element of Div!</p>
<p>This is a second child element of Div!</p>
<p>This is a third child element of Div!</p>
</div><br>
<button onclick="removeContent()">Remove Content</button>
<script>
function removeContent() {
let divElement = document.getElementById("divElement");
while (divElement.firstChild) {
divElement.removeChild(divElement.firstChild);
}
}
</script>
</body>
</html>
Using the innerHTML Property
The innerHTML property allows us to replace the HTML content of any element. When we assign an empty string to innerHTML, it clears all content of the element.
Syntax
element.innerHTML = "";
Example
In the example below, we use an event listener on the button to clear the div content using the innerHTML property.
<html>
<head>
<style>
div {
font-size: 1rem;
background-color: lightgreen;
color: darkblue;
height: 100px;
width: 600px;
padding: 20px;
}
</style>
</head>
<body>
<h2>Using the <i>innerHTML property</i> to clear the div element using JavaScript</h2>
<div id="divElement">
This is a sample div element.
</div><br>
<button id="clearButton">Remove Content</button>
<script>
let button = document.getElementById('clearButton');
button.addEventListener('click', () => {
let element = document.getElementById('divElement');
element.innerHTML = "";
});
</script>
</body>
</html>
Comparison of Methods
| Method | Browser Support | Performance | Recommended For |
|---|---|---|---|
innerHTML = "" |
All browsers | Fastest | Simple content clearing |
replaceChildren() |
Modern browsers | Good | Clean, modern approach |
removeChild() loop |
All browsers | Slower | When you need fine control |
Conclusion
The innerHTML property provides the easiest and fastest way to clear div content. Use replaceChildren() for modern browsers, and removeChild() when you need more control over the removal process.
16K+ Views
