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.
There are two approaches that are discussed below:
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) {
el_down.innerHTML = "Element Exists";
} else {
el_down.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") {
el_down.innerHTML = "Element Exists";
} else {
el_down.innerHTML = "Element Not Exists";
}
}
</script>
</body>
</html>
|
Output: