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. 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:
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;"> neveropen </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> var res = document.getElementById('result'); function GFG_Fun() { var 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: 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:
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;"> neveropen </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:
