How can I get the ID of an element using jQuery?

Question

<div id="test"></div> <script>   $(document).ready(function() {     alert($('#test').id);   });   </script> 

Why doesn't the above work, and how should I do this?

Answer 1

The jQuery way:

$('#test').attr('id') 

In your example:

$(document).ready(function() {    console.log($('#test').attr('id'));  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <div id="test"></div>

Or through the DOM:

$('#test').get(0).id; 

or even :

$('#test')[0].id; 

and reason behind usage of $('#test').get(0) in JQuery or even $('#test')[0] is that $('#test') is a JQuery selector and returns an array() of results not a single element by its default functionality

an alternative for DOM selector in jquery is

$('#test').prop('id') 

which is different from .attr() and $('#test').prop('foo') grabs the specified DOM foo property, while $('#test').attr('foo') grabs the specified HTML foo attribute and you can find more details about differences here.