Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to check an element with specific id exist using JavaScript?
In JavaScript, checking if an HTML element with a specific ID exists is a common task when manipulating the DOM. The document.getElementById() method returns the element if found, or null if not found.
Syntax
document.getElementById(id)
document ? The document object represents the HTML page loaded in the browser
getElementById() ? A method that searches for an element with the specified ID and returns it, or
nullif not found
How It Works
When document.getElementById() is called, it searches through the DOM tree to find an element with the matching ID. Since IDs must be unique in HTML, it returns the first (and should be only) matching element.
Method 1: Basic Null Check
<!DOCTYPE html>
<html>
<head>
<title>Check Element Existence</title>
</head>
<body>
<div id="myDiv">This div exists</div>
<button onclick="checkElement()">Check Element</button>
<p id="result"></p>
<script>
function checkElement() {
var element = document.getElementById("myDiv");
var result = document.getElementById("result");
if (element !== null) {
result.innerHTML = "Element with ID 'myDiv' exists!";
result.style.color = "green";
} else {
result.innerHTML = "Element with ID 'myDiv' does not exist!";
result.style.color = "red";
}
}
</script>
</body>
</html>
Method 2: Using Truthy/Falsy Check
<!DOCTYPE html>
<html>
<head>
<title>Element Existence Check</title>
</head>
<body>
<p id="testParagraph">Test paragraph</p>
<button onclick="checkMultipleElements()">Check Elements</button>
<div id="output"></div>
<script>
function checkMultipleElements() {
var ids = ["testParagraph", "nonExistent", "output"];
var output = document.getElementById("output");
var results = "";
ids.forEach(function(id) {
var element = document.getElementById(id);
if (element) {
results += "? ID '" + id + "' exists<br>";
} else {
results += "? ID '" + id + "' does not exist<br>";
}
});
output.innerHTML = results;
}
</script>
</body>
</html>
Method 3: Creating a Reusable Function
<!DOCTYPE html>
<html>
<head>
<title>Reusable Element Check</title>
</head>
<body>
<div id="container">Container div</div>
<button onclick="testFunction()">Test Function</button>
<p id="demo"></p>
<script>
function elementExists(id) {
return document.getElementById(id) !== null;
}
function testFunction() {
var demo = document.getElementById("demo");
var message = "";
if (elementExists("container")) {
message += "Container exists!<br>";
}
if (elementExists("missing")) {
message += "Missing element found!<br>";
} else {
message += "Missing element not found (as expected)<br>";
}
demo.innerHTML = message;
}
</script>
</body>
</html>
Comparison
| Method | Syntax | Best For |
|---|---|---|
| Strict null check | element !== null |
Explicit, clear intent |
| Truthy check | if (element) |
Shorter, common pattern |
| Reusable function | elementExists(id) |
Multiple checks, cleaner code |
Key Points
getElementById()returnsnullif the element doesn't existIDs should be unique in HTML documents
Both
!== nulland truthy checks work reliablyCreate reusable functions for repeated element existence checks
Conclusion
Use document.getElementById() with null checking to verify element existence. This approach is reliable, performant, and works across all browsers for DOM manipulation tasks.
5K+ Views
