How to get Id of an HTML and DOM object in jQuery? Example Tutorial

As a page author, the id of an HTML element is something you should know. Still, there are scenarios when the page is automatically generated, or maybe some form elements are generated by using frameworks like JSF. In that case, what do you do if you want to find an id attribute of some elements in the page programmatically? How do you find those ids using jQuery? There are several ways to solve this problem, a couple of them in this article itself.  The jQuery API provides many methods to get any attribute or property, including the id of an HTML element programmatically. 

In this article, I will share three easy ways to get the id of an element using jQuery. As a Java developer, I have benefitted immensely from using jQuery. 

Since I occasionally work with JSP to create views like tabbed GUI, tables generated by display tag, and lots of client-side validation and interaction, I found jQuery quite powerful and easy to use. 

Before jQuery, I had tried plain JavaScript, and to be honest, it wasn't a pleasant experience, but jQuery changed my mind and, in fact, it helped me to learn JavaScript better.


And, If you want to learn Modern JavaScript or level up your skills, then I suggest you join these JavaScript online courses from Udemy, Pluralsight, and Zero to Mastery Academy. It contains the best and hands-on course to learn ES 6 and other new JavaScript features.

One more thing which helped me to learn jQuery is the Head First jQuery book from O'Reilly. This is one of the best books for any programmer who wants to learn jQuery, and I highly recommend this to my readers.

How to get the id of an element using jQuery? Example

To get id or any other HTML attribute, we need to first grab that element using the jQuery selector. Suppose your element has a class "synthetic," then you can grab those elements by using the following jQuery:

$(".synthetic")

This will return an array of jQuery objects, and if you are sure that there is only one object, you can get its id as

$(".synthetic").get(0).id

or

$(".synthetic")[0)].id

or

$(".synthetic").prop(id)

If you want to find ids of multiple elements, you need to iterate through those arrays of the jQuery object using each() iterator.

That's all about how to find the id of an HTML element using jQuery programmatically. You just need to have a selector to grab the elements you want. Always remember that $() returns an array of jQuery objects, so you need to get the jQuery object using the get() method or array index before getting the id attribute from it.

Other jQuery and JavaScript tutorials you may like to explore

• How to get current URL Parameter using jQuery? (solution)
• Top 5 jQuery Books Every Web Developer Should Read? (see here)
• How to reload/refresh a page using jQuery? (answer)
• How to use multiple jQuery Date picker element in one HTML page? (answer)
• How to modify multiple elements in one go in jQuery? (example)
• 10 Examples of jQuery selectors for Web Developers (tutorial)
• How to redirect web page using jQuery code? (answer)
• 3 Ways to parse HTML using JSoup in Java? (solution)
• How to prevent double submission of POST data using JavaScript? (solution)
• How to check and uncheck checkboxes using jQuery? (tutorial)

Thanks for reading this article so far. If you like this jQuery tutorial and example then please share with your friends and colleagues. If you have any question or doubt then please drop a comment.

P. S. - If you don't mind learning from free resources and looking for best free online courses and tutorials to learn jQuery then you can also check out my list of free jQuery courses to start your jQuery journey.