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

0 0 1 minute read

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

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Check an Element with Specific 
        ID Exists using JavaScript ?
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        zambiatek
    </h1>
     
    <p>
        Click on button to check if 
        element exists using JavaScript
    </p>
     
    <button onClick="GFG_Fun()">
        click here
    </button>
     
    <p id="result"></p>
     
    <script>
        var res = document.getElementById('result');
 
        function GFG_Fun() {
            var el = document.getElementById('GFG');
 
            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() method 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:

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Check an Element with Specific
        ID Exists using JavaScript ?
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        zambiatek
    </h1>
 
    <p>
        Click on button to check if 
        element exists using JavaScript
    </p>
 
    <button onClick="GFG_Fun()">
        click here
    </button>
 
    <p id="result"></p>
 
    <script>
        let res = document.getElementById('result');
 
        function GFG_Fun() {
            let elm = document.getElementById('GFGUP');
             
            if (JSON.stringify(elm) != "null") {
                el_down.innerHTML = "Element Exists";
            } else {
                el_down.innerHTML = "Element Not Exists";
            }
        }
    </script>
</body>
 
</html>