How to display the tag name of the clicked element using jQuery ?
Given a HTML document containing some elements and the task is to display the clicked element.
Approach: First we create a HTML document containing some elements and add a jQuery function to display the clicked element. We select the HTML body using jQuery selector and when user click the element then get the element name and display the element name on the screen using text() method.
Syntax:
$("*", document.body).click(function (event) {
event.stopPropagation();
var domElement = $(this).get(0);
$("h3:first").text("Clicked Element: "
+ domElement.nodeName);
});Example:
HTML
<!DOCTYPE html><html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"> </script> <meta charset="utf-8"> <title> How to display the tag name of the clicked element using jQuery? </title> <style> table, th, td { border: 1px solid black; } </style></head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> How to display the tag name of the clicked element using jQuery? </h2> <table style="width:50%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Priya</td> <td>Sharma</td> <td>24</td> </tr> <tr> <td>Arun</td> <td>Singh</td> <td>32</td> </tr> <tr> <td>Sam</td> <td>Watson</td> <td>41</td> </tr> </table> <h3></h3> </center> <script> $("*", document.body).click(function (event) { event.stopPropagation(); var domElement = $(this).get(0); $("h3:first").text("Clicked Element: " + domElement.nodeName); }); </script></body> </html> |
Output:
Please Login to comment...