How to Check an Element with Specific ID Exists using JavaScript ?
Last Updated :
12 Jul, 2025
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:
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
<!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;">
GeeksforGeeks
</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 el = document.getElementById('GFG');
if (el != null) {
res.innerHTML = "Element Exists";
} else {
res.innerHTML = "Element Not Exists";
}
}
</script>
</body>
</html>
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
<!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;">
GeeksforGeeks
</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") {
res.innerHTML = "Element Exists";
} else {
res.innerHTML = "Element Not Exists";
}
}
</script>
</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check if an Element with Specific ID Exists</title>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<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>
</body>
</html>
Output:
Check if an Element with Specific ID Exists
Similar Reads
How to Check if a Specific Element Exists in a Set in JavaScript ? To check if a specific element exists in a Set in JavaScript, you can use the has method. The has method returns a boolean indicating whether an element with the specified value exists in the Set Syntax:myset.has(value);Parameters:value: It is the value of the element that has to be checked if it ex
1 min read
How to find element with specific ID using jQuery ? The question is to determine whether an element with a specific id exists or not using JQuery. jQuery on() Method: This method adds one or more event handlers for the selected elements and child elements.Syntax: $(selector).on(event, childSelector, data, function, map)Parameters: event: It is requir
3 min read
How to check whether an object exists in javascript ? Checking whether an object exists in JavaScript refers to determining if a variable or property has been declared and contains a valid value. This helps avoid errors when accessing or manipulating objects that may be undefined, null, or not initialized properly.Here we have some common approaches to
3 min read
How to check whether an object exists in javascript ? Checking whether an object exists in JavaScript refers to determining if a variable or property has been declared and contains a valid value. This helps avoid errors when accessing or manipulating objects that may be undefined, null, or not initialized properly.Here we have some common approaches to
3 min read
How to Check if element exists in the visible DOM in JavaScript ? This article will show you how to check whether an element exists in the visible DOM or not. For that purpose, there are several methods used but we're going to look at a few of them. Example 1: In this example, the element is searched by document.getElementById('Id') and !! operator is used before
2 min read
How to Change the ID of Element using JavaScript? We are given an element and the task is to change the ID of elements using JavaScript. ID is unique for any element and it can be assigned to an element only once. JavaScript provides a method to access this id and also to manipulate the id. Syntax:Selected_element.id = newID;Below are the appraoche
2 min read