Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 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>
  • 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>
  • Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :