Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 29 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads