Check If The HTML Element Exists Or Not

Introduction

Whenever we query an element using a selector, it is necessary to check whether that element exists or not, particularly for an element which is created dynamically. This blog explains how to check if an element exists in DOM or not, using jQuery.

Check the element exist

When you use the selector, it always returns the wrapped set. The result can be empty if the element is not there. The best way to find if the element exists or not is using the length property of the element. If the element does not exist, the value of its length will be zero.

Demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
<script src="https://autocompletefilter.azureedge.net/js-resource/autocomplete.js"></script>
</head>
<body>
<input id="autocomplete" />
<br />
<br />
<button id="btnClick" class="k-button">Click Me</button><label id="message"></label>
<script>
$("#btnClick").click(function () {
var autoComplete = $("#autocomplete");
var message = $("#message");
if (autoComplete.length == 0) {
message.text("Element Doesn't Exists in DOM").addClass("notExist")
}
else {
message.text("Element Exists in DOM").addClass("exist")
}
});
</script>
<style>
#message {
margin-left:10px;
}
.exist{
color:green
}
.notExist{
color:red
}
</style>
</body>
</html>

From the above code, you can observe that based on the length property, we are deciding if the element exists or not.

Result

Click on the button to find if the element exists or not in DOM.

Element Exists

Element does not exist

Let's make the code more generic.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
<script src="https://autocompletefilter.azureedge.net/js-resource/autocomplete.js"></script>
</head>
<body>
<input id="autocomplete" />
<br />
<br />
<button id="btnClick" class="k-button">Click Me</button><label id="message"></label>
<script>
jQuery.fn.exists = function () { return this.length > 0; }
$("#btnClick").click(function () {
var autoComplete = $("#autocomplete");
var message = $("#message");
if (autoComplete.exists()) {
message.text("Element Exists in DOM").addClass("exist")
}
else {
message.text("Element Doesn't Exists in DOM").addClass("notExist")
}
});
</script>
<style>
#message {
margin-left:10px;
}
.exist{
color:green
}
.notExist{
color:red
}
</style>
</body>
</html>

The "exists" function is used to check the element length and returns a value based on the condition in its definition.

I hope you have learned from this blog. Your valuable feedback, questions, or comments about this blog are always welcome.