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