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:

How to display a message on dblclick event on all paragraphs of a page using jQuery ?

vkash8574

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?