How to Check an Element with Specific ID Exists using JavaScript ?
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(without JQuery).
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:
<!DOCTYPE HTML><html><head><title>How to check an element with specificID exists using JavaScript?</title></head><bodystyle="text-align:center;"><h1style="color:green;">GeeksForGeeks</h1><pid="GFG_UP"></p><buttononClick="GFG_Fun()">click here</button><pid="GFG_DOWN"></p><script>var el_up = document.getElementById('GFG_UP');var el_down = document.getElementById('GFG_DOWN');el_up.innerHTML = "Click on button to check if "+ "element exists using JavaScript.";function GFG_Fun() {var el = document.getElementById('GFGUP');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() 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:
<!DOCTYPE HTML><html><head><title>How to check an element with specificID exists using JavaScript?</title></head><bodystyle="text-align:center;"><h1style="color:green;">GeeksForGeeks</h1><pid="GFG_UP"></p><buttononClick="GFG_Fun()">click here</button><pid="GFG_DOWN"></p><script>var el_up = document.getElementById('GFG_UP');var el_down = document.getElementById('GFG_DOWN');el_up.innerHTML = "Click on button to check if "+ "element exists using JavaScript.";function GFG_Fun() {var el = document.getElementById('GFGUP');if (JSON.stringify(el) != "null") {el_down.innerHTML = "Element Exists";} else {el_down.innerHTML = "Element Not Exists";}}</script></body></html> - Output:
.png)
.png)