How to Check an Element with Specific ID Exists using JavaScript ?

20 May, 2020
Given an HTML document containing some elements and the elements contains some id attribute. The task is to check the element with a specific ID exists or not using JavaScript(without JQuery).There are two approaches that are discussed below:
Approach 1: First, we will use document.getElementById() to get the ID and store the ID into a variable. Then compare the element (variable that store ID) with ‘null’ and identify whether the element exists or not.
Example:<!DOCTYPE HTML><html>  <head>    <title>        How to check an element with specific        ID exists using JavaScript?    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>          <p id="GFG_UP"></p>      <button onClick="GFG_Fun()">        click here    </button>          <p id="GFG_DOWN"></p>      <script>        var el_up = document.getElementById('GFG_UP');        var el_down = document.getElementById('GFG_DOWN');          el_up.innerHTML = "Click on button to check if "                    + "element exists using JavaScript.";                              function GFG_Fun() {            var el = document.getElementById('GFGUP');            if (el != null) {                el_down.innerHTML = "Element Exists";            } else {                el_down.innerHTML = "Element Not Exists";            }        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        How to check an element with specific        ID exists using JavaScript?    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>          <p id="GFG_UP"></p>      <button onClick="GFG_Fun()">        click here    </button>          <p id="GFG_DOWN"></p>      <script>        var el_up = document.getElementById('GFG_UP');        var el_down = document.getElementById('GFG_DOWN');          el_up.innerHTML = "Click on button to check if "                    + "element exists using JavaScript.";                              function GFG_Fun() {            var el = document.getElementById('GFGUP');            if (el != null) {                el_down.innerHTML = "Element Exists";            } else {                el_down.innerHTML = "Element Not Exists";            }        }    </script></body>  </html>
Output:
Approach 2: First, we will use document.getElementById() to get the ID and store the ID into a variable. Then use JSON.stringify() method on the element (variable that store ID) and compare the element with ‘null’ string and then identify whether the element exists or not.
Example:<!DOCTYPE HTML><html>  <head>    <title>        How to check an element with specific        ID exists using JavaScript?    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>          <p id="GFG_UP"></p>      <button onClick="GFG_Fun()">        click here    </button>          <p id="GFG_DOWN"></p>      <script>        var el_up = document.getElementById('GFG_UP');        var el_down = document.getElementById('GFG_DOWN');        el_up.innerHTML = "Click on button to check if "                    + "element exists using JavaScript.";                              function GFG_Fun() {            var el = document.getElementById('GFGUP');            if (JSON.stringify(el) != "null") {                el_down.innerHTML = "Element Exists";            } else {                el_down.innerHTML = "Element Not Exists";            }        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        How to check an element with specific        ID exists using JavaScript?    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>          <p id="GFG_UP"></p>      <button onClick="GFG_Fun()">        click here    </button>          <p id="GFG_DOWN"></p>      <script>        var el_up = document.getElementById('GFG_UP');        var el_down = document.getElementById('GFG_DOWN');        el_up.innerHTML = "Click on button to check if "                    + "element exists using JavaScript.";                              function GFG_Fun() {            var el = document.getElementById('GFGUP');            if (JSON.stringify(el) != "null") {                el_down.innerHTML = "Element Exists";            } else {                el_down.innerHTML = "Element Not Exists";            }        }    </script></body>  </html>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)