How to Get the Tag Name of a Selected Element Using jQuery?

How to Determine the Tag Name of a Selected Element with jQuery

Getting the tag name of a selected element in jQuery can be a straightforward task. This can be useful in various scenarios, such as dynamically fetching the HTML structure or manipulating elements based on their tags.

Solution 1: Using .prop("tagName")

jQuery provides the .prop() method that allows you to retrieve or set various element properties. To obtain the tag name, simply use .prop("tagName"):

const tagName = jQuery(element).prop("tagName");

Examples:

jQuery("<a>").prop("tagName"); // Output: "A"
jQuery("<h1>").prop("tagName"); // Output: "H1"

Solution 2: Creating a Custom Tag Name Function

If repeatedly writing .prop("tagName") becomes tedious, you can create a custom function to simplify the process:

jQuery.fn.tagName = function() {
  return this.prop("tagName");
};

Usage:

const tagName = jQuery(element).tagName();

Both methods return the tag name of the element in uppercase. If you prefer lowercase tag names, modify the custom function:

jQuery.fn.tagNameLowerCase = function() {
  return this.prop("tagName").toLowerCase();
};

The above is the detailed content of How to Get the Tag Name of a Selected Element Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!