In this article, you will learn how to get the ID of an element using Jquery or javascript. There are various ways to get the ID on an element.
Here are some examples to get the ID of an element using Jquery or Javascript
In this example, we used the attr() method to get the ID of an element using jquery. The attr() method used to set or get the attribute value of the selected element.
Here is an example to get the ID of an element using attr() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Get ID of an Element</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="test" style="background: #dd55; padding: 10px;">
<h2>Tutorials<span style="color: purple;">Rack</span></h2>
</div>
<button type="button" id="btn_getID">Show Div ID</button>
<!-- Script to Get the Id of the Element -->
<script>
$(document).ready(function () {
$("#btn_getID").click(function () {
var element_Id = $("#test").attr("id");
alert("Id of the Element: " + element_Id);
});
});
</script>
</body>
</html>In this example, we used the prop() method to get the ID of an element using jquery. The prop() method used to set or get the properties and value of the selected element.
Here is an example to get the ID of an element using the prop() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Get ID of an Element</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="test" style="background: #dd55; padding: 10px;">
<h2>Tutorials<span style="color: purple;">Rack</span></h2>
</div>
<button type="button" id="btn_getID">Show Div ID</button>
<!-- Script to Get the Id of the Element -->
<script>
$(document).ready(function () {
$("#btn_getID").click(function () {
var element_Id = $("#test").prop("id");
alert("Id of the Element: " + element_Id);
});
});
</script>
</body>
</html>
In this example, we used the document.getElementById("ElementID").id to get the ID of the element using javascript.
Here is an example to get the ID of an element using document.getElementById("ElementID").id method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>How to Get the ID of an Element using Javascript</title>
</head>
<body>
<div id="test" style="background: #dd55; padding: 10px;">
<h2>Tutorials<span style="color: purple;">Rack</span></h2>
</div>
<button type="button" id="btn_getID" onclick="BtnClick()">Show Div ID</button>
<!-- Script to Get the Id of the Element -->
<script>
function BtnClick() {
var element = document.getElementById("test").id;
alert("Id of the Element: " + element);
}
</script>
</body>
</html>
In this example, we used the element.getAttribute() to get the ID of the element using javascript.
Here is an example to get the ID of an element using a element.getAttribute() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>How to Get the ID of an Element using Javascript</title>
</head>
<body>
<div id="test" style="background: #dd55; padding: 10px;">
<h2>Tutorials<span style="color: purple;">Rack</span></h2>
</div>
<button type="button" id="btn_getID" onclick="BtnClick()">Show Div ID</button>
<!-- Script to Get the Id of the Element -->
<script>
function BtnClick() {
var element = test.getAttribute("id");
alert("Id of the Element: " + element);
};
</script>
</body>
</html>
I hope this article will help you to understand how to get the ID of an element using Jquery or javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments