How to check an element exist or not in jQuery?

jQuery Web Development Front End Technology

Overview

We can check for an HTML element such as <p>, <h>, etc that they exist in the HTML page or not using jQuery. To achieve the solution, we have the "length" property of jQuery, which checks the specific element in the HTML document and returns the length of the particular element, which is the number of times that element is present in the HTML body. The length property is present in the jQuery ($) main library.

Syntax

The syntax used in this program is −

$(elementName).length;

elementName −The elementName can be any tag, class name, id name which is used to build the structure of the web page. Such as <p>, <label>, <input>, <h1>, <h2>, <h3>, <span> etc.
length −length is a property of jQuery object which checks the occurrence of an element in HTML.

Algorithm

Step 1 − Create some elements in the HTML body such as p, span, label, etc. and add a CDN link in the head tag of HTML.
Step 2 − Use jQuery syntax, select the button as selector and perform a click() event method.
Step 3 − Select some elements from HTML using $(selectors) and check the length of the elements using the length method. Store the length of these elements in separate variables.
Step 4 − Display the output on screen. If the length method returns value greater than zero then that element exists, otherwise if it returns value equals to zero then the element does not exist.

Example

In this example we have to search for certain elements in this such as <p>, class "para", <label>, <span>. As we click the "check element" button, it fires the jQuery function, which contains the $(element).length property. The return of the specific elements is stored in their particular variable. After that, the text() property is invoked to insert the text on the web page. The result of this example can be seen in the image below.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Element exist or not using jQuery</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
   <style>
      body {
         color: white;
         background-color: #0a0a0a;
         display: flex;
         place-content: center;
         min-height: 90vh;
         flex-direction: column;
         text-align: center;
      }
      p {
         width: 50%;
         margin: 8px auto;
         padding: 0.4rem;
      }
      button {
         border: none;
         width: 8rem;
         padding: 0.4rem;
         background-color: #0a0a0a;
         box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.788);
         border-radius: 5px;
         margin: 8px auto;
         color: white;
      }
   </style>
</head>
   <body>
      <p></p>
      <p></p>
      <p></p>
      <span></span><span></span>
      
      <h1>Check the element by clicking button</h1>
      
      <!-- This <button> tag will trigger the jQuery arrow function -->
      <button>Check Element</button>
      
   <!-- Output of the length will shown here -->
      <p id="output" style="text-align:start;background-color: green; width: 8rem;">
         1)	p: <span id="pl"></span><br />
         2)	para(class): <span id="pal"></span><br />
         3) label: <span id="ll"></span><br />
         4) span: <span id="sl"></span><br />
      </p>
      
      <script>
         // The jQuery function start from here
         $("button").click(() => {
            var pel = $("p").length;
            var pael = $(document.getElementsByClassName("para")).length;
            var lel = $("label").length;
            var sel = $("span").length;
         
            $(document.getElementById("pl")).text(pel);
            $(document.getElementById("ll")).text(lel);
            $(document.getElementById("sl")).text(sel);
         })
      </script>
   </body>
</html>

The output shows the existing element in the HTML. In the below output, the above code contains 4 <p> tags, 2 <p class="para"> tags with "para" class names, and in the jQuery function, it has also checked for the <label> tag, but the HTML code does not contain any type of that tag, so it has returned 0 and it contains 6 <span> tags.

Conclusion

The return type of the length property is "Number." When the element exists in the HTML structure it returns the number which is greater than ‘0’. If the element does not exist in the HTML element, then it returns 0 or null. The length property finds the element in the hierarchical order, and returns all the total number of the specific tags that are present in the HTML. The length property in jQuery is different from that in JavaScript because in JavaScript, the length method returns the size of the array, while in jQuery it returns the number of elements present in the HTML. The jQuery selectors select the HTML element and allow for further manipulations. The various jQuery selectors are ‘*’ this selects all the element in the HTML, ‘#id’ select the elements with the specific id name, ‘.className’ is used to select that particular element.