Skip to content
Related Articles

Related Articles

Improve Article

How to display the tag name of the clicked element using jQuery ?

  • Last Updated : 29 Jan, 2021

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up