How to find element with specific ID using jQuery ? - GeeksforGeeks

26 May, 2021
The question is to determine whether an element with a specific id exists or not using JQuery.  
jQuery on() Method: This method adds one or more event handlers for the selected elements and child elements.Syntax:  
$(selector).on(event, childSelector, data, function, map)
Parameters: event: It is required parameter. It specifies one or more event(s) or namespaces to attach to the selected elements. In case of multiple event values, those are separated by space. Event must be a valid.childSelector: It is optional parameter. It specifies that the event handler should only be attached to the defined child elements.data: It is optional parameter. It specifies additional data to pass to the function.function: It is required parameter. It specifies the function to run when the event occurs.map: It specifies an event map ({event:func(), event:func(), ...}) having one or more event to add to the selected elements, and functions to run when the events happens.  
event: It is required parameter. It specifies one or more event(s) or namespaces to attach to the selected elements. In case of multiple event values, those are separated by space. Event must be a valid.
childSelector: It is optional parameter. It specifies that the event handler should only be attached to the defined child elements.
data: It is optional parameter. It specifies additional data to pass to the function.
function: It is required parameter. It specifies the function to run when the event occurs.
map: It specifies an event map ({event:func(), event:func(), ...}) having one or more event to add to the selected elements, and functions to run when the events happens.  
jQuery length Property: The length property is used to count number of the elements of the jQuery object.Syntax:  
$(selector).length
 
Example 1: In this example, the var name contains ID name to check. First JQuery selector checks for the ID via var name and then length property is used to verify whether something is selected or not. 
html
<!DOCTYPE HTML><html>    <head>        <title>            How to find element with            specific id exists or not        </title>                 <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </script>    </head>     <body style = "text-align:center;">         <h1 id = "h" style = "color:green;" >            GeeksForGeeks        </h1>         <p id = "GFG_UP" style =            "font-size: 15px; font-weight: bold;">        </p>                  <button id = "button">            Click here        </button>         <p id = "GFG_DOWN" style =            "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>            $('#GFG_UP').                text("Click on button to check existence of particular ID");                             var name = "h";            $("button").on('click', function() {                                 var exist = "";                                 if($("#" + name).length == 0) {                    exist = "Not Exists";                }                else {                    exist = "Exists";                }                                 $('#GFG_DOWN').text("Element of ID = '"                        + name + "' " + exist);                             });                                  </script>    </body></html>                   
Output:  
Before clicking on the button:  
 
After clicking on the button:  
 
Example 2: In this example, the ID name to check is directly passed in the JQuery selector. First JQuery selector checks for the ID and then length property is used to verify whether something is selected or not. 
html
<!DOCTYPE HTML><html>    <head>        <title>            How to find element with            specific id exist or not        </title>                 <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </script>    </head>     <body style = "text-align:center;">         <h1 id = "h" style = "color:green;" >            GeeksForGeeks        </h1>         <p id = "GFG_UP" style =            "font-size: 15px; font-weight: bold;">        </p>                  <button id = "button">            Click here        </button>         <p id = "GFG_DOWN" style =            "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>            $('#GFG_UP').                text("Click on button to check existence of particular ID");                             $("button").on('click', function() {                                 var exist = "";                                 if($("#button").length == 0) {                    exist = "Not Exists";                }                else {                    exist = "Exists";                }                                 $('#GFG_DOWN').text("Element of ID = 'button"                        + "' " + exist);            });        </script>    </body></html>                   
Output:  
Before clicking on the button:  
 
After clicking on the button:  
 
 
varshagumber28
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
How to Show and Hide div elements using radio buttons?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?