How to check element exists or not in jQuery ?
There are two ways to check whether an element in the HTML document exists or not using jQuery.
Approach 1: Using the length property in jQuery. If the element exists, then the length property will return the total count of the matched elements with the specified selector. In JavaScript, everything is either a truthy or a falsy value, thus if the length is 0 then it evaluates to false, everything else is true.
There is one div element defined in the following example and there are two buttons, which on click check the existence of two separate divs. If the first button is clicked, an alert message is displayed which states that “div 1 exists” since a div element with an id of div1 is present in the HTML markup. However, if the second button is clicked, an alert message is still shown but it states that “div 2 does not exist” since a div element with an id of div2 is absent.
Example:
HTML
<!DOCTYPE html> <html> <head> <!-- jQuery --> <script src= </script> <title>Check whether an element exists or not using jQuery</title> <!-- Basic inline styling --> <style> body { text-align: center; } h1 { color: green; font-size: 2.5rem; } div { font-weight: bold; font-size: 1.5rem; } button { cursor: pointer; margin-top: 2rem; } </style> </head> <body> <h1>GeeksforGeeks</h1> <div id="div1">This is div with id div1</div> <button id="div-1-check-btn"> Click to check if div 1 exists </button> <button id="div-2-check-btn"> Click to check if div 2 exists </button> <script type="text/javascript"> $(document).ready(function () { $("#div-1-check-btn").click(function () { if ($("#div1").length) { alert("Div 1 exists"); } else { alert("Div 1 does not exist"); } }); $("#div-2-check-btn").click(function () { if ($("#div2").length) { alert("Div 2 exists"); } else { alert("Div 2 does not exist"); } }); }); </script> </body> </html> |
Output:
Approach 2: Using a jQuery plugin with methods. This approach is quite similar to the first approach due to the fact that it also uses the length property in jQuery but the difference is that a user-defined method exists() is created from the plugin using the same logic of truthy and falsy values of length as discussed in the previous technique.
There is one div element defined in the following example and there are two buttons, which on click check the existence of two separate divs. If the first button is clicked, an alert message is displayed which states that “div 1 does not exist” since a div element with an id of div1 is absent in the HTML markup. However, if the second button is clicked, an alert message is still shown but it states that “div2 exists” since a div element with an id of div2 is present.
Example:
HTML
<!DOCTYPE html> <html> <head> <!-- jQuery --> <script src= </script> <title>Check whether an element exists or not using jQuery</title> <!-- Basic inline styling --> <style> body { text-align: center; } h1 { color: green; font-size: 2.5rem; } div { font-weight: bold; font-size: 1.5rem; } button { cursor: pointer; margin-top: 2rem; } </style> </head> <body> <h1>GeeksforGeeks</h1> <div id="div2">This is div with id div2</div> <button id="div-1-check-btn"> Click to check if div 1 exists </button> <button id="div-2-check-btn"> Click to check if div 2 exists </button> <script type="text/javascript"> $(document).ready(function () { jQuery.fn.exists = function () { return this.length > 0; }; $("#div-1-check-btn").click(function () { if ($("#div1").exists()) { alert("Div 1 exists"); } else { alert("Div 1 does not exist"); } }); $("#div-2-check-btn").click(function () { if ($("#div2").exists()) { alert("Div 2 exists"); } else { alert("Div 2 does not exist"); } }); }); </script> </body> </html> |
Output:
Please Login to comment...