How to Check an Element with Specific ID Exists using JavaScript ? (original) (raw)

Last Updated : 23 Aug, 2024

Given an HTML document containing some elements and the elements contain some id attribute. The task is to check whether the element with a specific ID exists or not using JavaScript.

Below are the approaches to check an element with specific ID exists or not using JavaScript:

Table of Content

• Approach 1: Using the document.getElementById() method
• Approach 2: Using document.getElementById() and JSON.stringify() method
• Approach 3: Using document.querySelector() Method

**Approach 1: Using the document.getElementById() method

First, we will use document.getElementById() to get the ID and store the ID into a variable. Then compare the element (a variable that stores ID) with 'null' and identify whether the element exists or not.

**Example: This example shows the implementation of the above-explained approach.

html `

GeeksforGeeks

<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 el = document.getElementById('GFG');

        if (el != null) {
            res.innerHTML = "Element Exists";
        } else {
            res.innerHTML = "Element Not Exists";
        }
    }
</script>

`

**Output:

**Approach 2: Using document.getElementById() and **JSON.stringify() method

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: This example shows the implementation of the above-explained approach.

html `

GeeksforGeeks

<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") {
            res.innerHTML = "Element Exists";
        } else {
            res.innerHTML = "Element Not Exists";
        }
    }
</script>

`

**Output:

Approach 3: Using document.querySelector() Method

The document.querySelector() method returns the first element that matches a specified CSS selector. If no elements match, it returns null. This method is more versatile than getElementById() because it allows for more complex selectors (e.g., classes, attributes).

Example:

HTML `

GeeksforGeeks

<p>Click on the button to check if the element exists using JavaScript</p>

<button onClick="checkElement()">Click here</button>

<p id="result"></p>

<script>
    let result = document.getElementById('result');

    function checkElement() {
        let element = document.querySelector('#GFG');

        if (element) {
            result.innerHTML = "Element Exists";
        } else {
            result.innerHTML = "Element Not Exists";
        }
    }
</script>

`

Output:

Check if an Element with Specific ID Exists