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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Untitled</title>
  7. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css">
  8. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css">
  9. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.default.min.css">
  10. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css">
  12. <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  13. <script src="https://kendo.cdn.telerik.com/2018.1.117/js/angular.min.js"></script>
  14. <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jszip.min.js"></script>
  15. <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
  16. <!--<script src="http://localhost:11207/JS/autocomplete.js"></script>-->
  17. <script src="https://autocompletefilter.azureedge.net/js-resource/autocomplete.js"></script> <!-- Azure CDN -->
  19. </head>
  21. <body>
  22. <input id="autocomplete" />
  23. <br />
  24. <br />
  25. <button id="btnClick" class="k-button">Click Me</button><label id="message"></label>
  27. <script>
  30. $("#btnClick").click(function () {
  31. var autoComplete = $("#autocomplete");
  32. var message = $("#message");
  34. if (autoComplete.length == 0) {
  35. message.text("Element Doesn't Exists in DOM").addClass("notExist")
  36. }
  37. else {
  38. message.text("Element Exists in DOM").addClass("exist")
  39. }
  42. });
  43. </script>
  44. <style>
  45. #message {
  46. margin-left:10px;
  47. }
  49. .exist{
  50. color:green
  51. }
  52. .notExist{
  53. color:red
  54. }
  55. </style>
  56. </body>
  58. </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.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Untitled</title>
  7. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css">
  8. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css">
  9. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.default.min.css">
  10. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css">
  12. <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  13. <script src="https://kendo.cdn.telerik.com/2018.1.117/js/angular.min.js"></script>
  14. <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jszip.min.js"></script>
  15. <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
  16. <!--<script src="http://localhost:11207/JS/autocomplete.js"></script>-->
  17. <script src="https://autocompletefilter.azureedge.net/js-resource/autocomplete.js"></script> <!-- Azure CDN -->
  19. </head>
  21. <body>
  22. <input id="autocomplete" />
  23. <br />
  24. <br />
  25. <button id="btnClick" class="k-button">Click Me</button><label id="message"></label>
  27. <script>
  28. jQuery.fn.exists = function () { return this.length > 0; }
  30. $("#btnClick").click(function () {
  31. var autoComplete = $("#autocomplete");
  32. var message = $("#message");
  34. if (autoComplete.exists()) {
  35. message.text("Element Exists in DOM").addClass("exist")
  36. }
  37. else {
  39. message.text("Element Doesn't Exists in DOM").addClass("notExist")
  40. }
  43. });
  44. </script>
  45. <style>
  46. #message {
  47. margin-left:10px;
  48. }
  50. .exist{
  51. color:green
  52. }
  53. .notExist{
  54. color:red
  55. }
  56. </style>
  57. </body>
  59. </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.