In Javascript, there are many ways for us to work with an element. To clear the content of a Div element using JavaScript is not as difficult as you think. Today I will introduce some ways to do it in this article. Let’s read it now.
Clear the content of a Div element using JavaScript
Use ‘textContent‘ property
The textContent property is used to set or retrieve the text content of that node and its children.
Syntax:
element.textContentor
element.textContent = textParameters:
- text: This is the string you want to set the element’s text content.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>LearnShareIT</h1>
<h2>Clear the Content of a Div element using JavaScript</h2>
<div id="demo">Hello LearnShareIT</div>
<script>
var el = document.querySelector("#demo");
el.textContent = '';
document.getElementById("demo").innerHTML = el.textContent;
</script>
</body>
</html>
Before running the JS code:
<div id="demo">Hello LearnShareIT</div>
After running the JS code:
<div id="demo"></div>
In the example, we see that I used two syntaxes of the textContent property to clear the content of a Div element and got the text content of that element to load on the page.
To clear the content of a Div element, I reset it to an empty string.
Use ‘innerText‘ property
The innerText property sets or returns the element’s text content, including all children except <script> and <style> tags.
Syntax:
element.innerTextor
element.innerText = textParameters:
- text: This is the string you want to set the element’s inner text content.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>LearnShareIT</h1>
<h2>Clear the Content of a Div element using JavaScript</h2>
<div id="demo">Hello LearnShareIT</div>
<script>
var el = document.querySelector("#demo");
el.innerText = '';
document.getElementById("demo").innerHTML = el.innerText;
</script>
</body>
</html>
Before running the JS code:
<div id="demo">Hello LearnShareIT</div>
After running the JS code:
<div id="demo"></div>
I used an empty string and changed the text content of the Div element, and now I have to successfully clear the content of a Div element.
Use ‘innerHTML‘ property
Similar to the innerText and textContent properties, the innerHTML property also has the same function and return value. And both use a way to clear the content of a Div element.
Syntax:
element.innerHTMLor
element.innerHTML = textParameters:
- text: This is the string you want to set the element’s text content.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>LearnShareIT</h1>
<h2>Clear the Content of a Div element using JavaScript</h2>
<div id="demo">Hello LearnShareIT</div>
<script>
var el = document.querySelector("#demo");
el.innerHTML = '';
document.getElementById("demo").innerText = el.innerHTML;
</script>
</body>
</html>
Before running the JS code:
<div id="demo">Hello LearnShareIT</div>
After running the JS code:
<div id="demo"></div>
The difference between the three properties above is the return value. To better understand, click here to see.
Summary
In the above article, I have introduced to you some ways to clear the content of a Div element using JavaScript with some basic properties. Follow and practice them for better understanding. I hope this article can help you and your program.
Maybe you are interested:
- Call a function if an Element exists using JavaScript
- Show/Hide an element on Radio button Selection using JS
- Remove the “disabled” Attribute using JavaScript
- Clear Input fields after Submit using JavaScript
My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css
