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 display HTML element with JavaScript?
In this tutorial, we will learn how to display an HTML element using JavaScript.
HTML elements are the components that make up an HTML format file. These components are in charge of constructing web pages and defining their content. In HTML, an element typically consists of a start tag, content, and a closing tag.
Some HTML elements are ?
| Starting Tag | Content | Ending Tag |
|---|---|---|
| <p> | This is a paragraph. | </p> |
| <h1> | This is the largest heading. | </h1> |
| <div> | This is a division content. | </div> |
| <br> | Line Break. | (no closing tag) |
Some HTML elements like <img>, <hr>, and <br> do not require closing tags. They are referred to as void elements.
There are three main JavaScript methods to show or hide HTML elements: using the visibility property, the display property, and the hidden attribute.
Using the visibility Property
The visibility property controls whether an element is visible or hidden. Unlike display:none, visibility:hidden keeps the element's space in the layout while making it invisible.
Syntax
document.getElementById("elementId").style.visibility = "visible";
document.getElementById("elementId").style.visibility = "hidden";
Example
This example shows how to toggle text visibility using buttons. The element maintains its layout space when hidden.
<html>
<body>
<p id="div">Click on Hide to remove text & Click on Show to display text</p>
<button type="button" onclick="displayHide()"> Hide </button>
<button type="button" onclick="displayShow()"> Show </button>
<script>
function displayHide() {
document.getElementById("div").style.visibility = "hidden";
}
function displayShow() {
document.getElementById("div").style.visibility = "visible";
}
</script>
</body>
</html>
Using the display Property
The display property completely removes the element from the layout when set to "none", unlike visibility which only makes it invisible.
Syntax
To get the display property:
object.style.display
To set the display property:
object.style.display = "block"; // Show element object.style.display = "none"; // Hide element
Example
This example demonstrates hiding and showing a div element completely. When hidden, the element takes no space in the layout.
<html>
<head>
<style>
#myDIV {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<p>Click the "Show" button to display the div element</p>
<p>Click the "Hide" button to remove the div element</p>
<button onclick="myFunction()">Show</button>
<button onclick="myFunction1()">Hide</button>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.display = "block";
}
function myFunction1() {
document.getElementById("myDIV").style.display = "none";
}
</script>
</body>
</html>
Using the hidden Property
The hidden attribute is a boolean property that completely hides elements from view. It's a semantic way to indicate that content is not currently relevant.
Syntax
document.getElementById("elementId").hidden = true; // Hide
document.getElementById("elementId").hidden = false; // Show
Example
This example shows how to use the hidden property to reveal content when a button is clicked.
<html>
<body>
<div id="welcome" class="panel">
<h3>Using Hidden Property</h3>
<p>Click on the OK button to Display A message</p>
<button class="button" id="okButton">OK</button>
</div>
<div id="awesome" class="panel" hidden>
<h3>Have a great day with your loved ones!</h3>
</div>
<script>
document.getElementById("okButton")
.addEventListener("click", function() {
document.getElementById("welcome").hidden = true;
document.getElementById("awesome").hidden = false;
}, false);
</script>
</body>
</html>
Comparison of Methods
| Method | Element Space | Use Case |
|---|---|---|
visibility: hidden |
Preserves space | Temporary hiding without layout changes |
display: none |
Removes from layout | Complete removal from document flow |
hidden = true |
Removes from layout | Semantic hiding of irrelevant content |
Conclusion
JavaScript provides three main approaches to display HTML elements: visibility for maintaining layout space, display for complete show/hide control, and hidden for semantic content management. Choose based on whether you need to preserve the element's layout space.
6K+ Views
