How to display HTML element with JavaScript?

Javascript Object Oriented Programming Front End Technology

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 (tag name), a closing tag (tag name), and any text that is added in between. A collection of end tags, start tags, content, and attributes is what constitutes an element technically.

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.

In some cases, the HTML elements <p>...</p> and <h1>...</h1> are both present. Some HTML elements, such the <img.../>, < hr />, and <br /> elements, do not need closing. They are referred to as void elements.

Furthermore, we have different methods to achieve our goal in this tutorial.

Using the visibility Property

An element's visibility can be set or returned using the visibility attribute.

An element may be displayed or hidden by the creator using the visibility attribute. It resembles the show property in many ways. The distinction is that whereas visibility:hidden makes the contents of the element invisible while maintaining the element's original location and size, display:none completely conceals the element.

Syntax

Following is the syntax for using the visibility property −

document.getElementById("div").style.visibility = "visible";

Example

In this example, we see that a paragraph div has been created that contains text which gets hidden when the Hide button is clicked. The same text is displayed when Show button is clicked. The visibility property helps to change the visibility of the HTML element. It controls whether the element will be shown or hidden from the visitor.


<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>

In the above output, the users can see that on clicking show, the text is visible on the user’s screen. On clicking the Hide button, we see the text is being hidden from the user’s visibility.

Using the display Property

The display type of an element can be set or returned using the Style display attribute in the HTML DOM. Comparable to the visibility attribute, which shows or hides an element, it is similar. While visibility: hidden means that just the contents of the element will be concealed, the element will still be in its original location and size, display: none means that the element will be completely hidden.

Syntax

Following is the syntax for the display property −

It returns the display property −

object.style.display

It sets the display property −

object.style.display = value;

Example

In this example, we can see a div element #myDIV has been created. On clicking the Show button this div element is shown to the user. On clicking the Hide button this div element is being hidden from the user’s visibility. The display element controls whether the #myDIV element will be shown or hidden from the user’s visibility.


<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>

In this output, we can see that on clicking the Show button the div element is visible and on clicking the Hide button the div element gets hidden.

Using the hidden Property

A boolean value makes up the hidden attribute. It indicates that an element is either not important yet or is no longer relevant when it is present. Elements that have the hidden attribute defined shouldn't be shown by browsers.

Another application of the hidden property is to prevent a user from viewing an element until a different requirement has been satisfied (like selecting a checkbox, etc.). The element might then be made visible by removing the hidden property using JavaScript.

Syntax

Below is the syntax for using the Hidden property on JavaScript −

document.getElementById("div_element").hidden = true;

Example

In this example, the div element contains an id and a class which contains some text. On clicking the OK button, we can display the hidden text. The hidden attribute helps to show some hidden text when a Boolean value of true is given to it. When a Boolean value of false is given to it, it will hide the previous text.


<html>
   <head>
   </head>
   <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>