709

Is there an easy way to get a tag name?

For example, if I am given $('a') into a function, I want to get 'a'.

1

7 Answers 7

1135

You can call .prop("tagName"). Examples:

jQuery("<a>").prop("tagName"); //==> "A"
jQuery("<h1>").prop("tagName"); //==> "H1"
jQuery("<coolTagName999>").prop("tagName"); //==> "COOLTAGNAME999"


If writing out .prop("tagName") is tedious, you can create a custom function like so:

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

Examples:

jQuery("<a>").tagName(); //==> "A"
jQuery("<h1>").tagName(); //==> "H1"
jQuery("<coolTagName999>").tagName(); //==> "COOLTAGNAME999"


Note that tag names are, by convention, returned CAPITALIZED. If you want the returned tag name to be all lowercase, you can edit the custom function like so:

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

Examples:

jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"
10
  • 20
    AS of jQuery 1.6, this should be .prop.
    – gen_Eric
    Apr 16, 2012 at 16:12
  • 3
    Is the capitalisation convention followed by all browsers? If not, does jQuery normalise this?
    – callum
    Sep 4, 2013 at 16:05
  • 8
    tagName is part of the DOM spec and is always capitalized.
    – tilleryj
    Sep 5, 2013 at 20:28
  • Note that the string that's returned is in CAPITAL LETTERS. This'll be a gotcha if you're trying to compare it to "div" or "a" for example. Apr 29, 2014 at 23:41
  • 3
    using toLowerCase() or toUpperCase() may be helpful when comparing prop('tagName') result to a tag name. if($("my_selector").prop("tagName").toLowerCase() == 'div') or if($("my_selector").prop("tagName").toUpperCase() == 'DIV') Jun 4, 2014 at 14:39
104

You can use the DOM's nodeName property:

$(...)[0].nodeName
6
  • Thanks. Works great - although I'll use the more jQueryish version because I'm in a jQuery world at the moment. Mar 18, 2011 at 2:28
  • 6
    pure JS solutions (like this one) are generally superior to jQuery ones especially if they do not suffer from browser compatibility problems or are much more verbose.
    – Steven Lu
    Jul 25, 2012 at 16:24
  • 26
    ... and specifically because of those browser incompatibility issues, the jQuery ones are often superior if someone is picking a solution and isn't well-versed in what browser-incompatibilities to watch out for. ;) Aug 22, 2012 at 13:37
  • 4
    I consider this superior because it doesn't matter what the jQuery version is, this solution works on all versions. +1 Sep 24, 2012 at 14:54
  • 7
    particularly if you are in a each()-like situation, where you have to cast the element back to a jquery object to get a property that was already there, like $(this).prop('tagname'). this.nodeName is often more efficient. +1
    – commonpike
    Nov 29, 2012 at 12:24
62

As of jQuery 1.6 you should now call prop:

$target.prop("tagName")

See http://api.jquery.com/prop/

53

jQuery 1.6+

jQuery('selector').prop("tagName").toLowerCase()

Older versions

jQuery('selector').attr("tagName").toLowerCase()

toLowerCase() is not mandatory.

2
  • Why are you doing new String?
    – gen_Eric
    Apr 16, 2012 at 16:14
  • Because toLowerCase() is a method of String Apr 25, 2012 at 13:35
26

This is yet another way:

$('selector')[0].tagName
1
  • Nice one! Clearer than nodeName and even shorter. :P
    – Dennis98
    Oct 22, 2015 at 12:41
12

You should NOT use jQuery('selector').attr("tagName").toLowerCase(), because it only works in older versions of Jquery.

You could use $('selector').prop("tagName").toLowerCase() if you're certain that you're using a version of jQuery thats >= version 1.6.


Note :

You may think that EVERYONE is using jQuery 1.10+ or something by now (January 2016), but unfortunately that isn't really the case. For example, many people today are still using Drupal 7, and every official release of Drupal 7 to this day includes jQuery 1.4.4 by default.

So if do not know for certain if your project will be using jQuery 1.6+, consider using one of the options that work for ALL versions of jQuery :

Option 1 :

jQuery('selector')[0].tagName.toLowerCase()

Option 2

jQuery('selector')[0].nodeName.toLowerCase()
2

nodeName will give you the tag name in uppercase, while localName will give you the lower case.

$("yourelement")[0].localName 

will give you : yourelement instead of YOURELEMENT

Not the answer you're looking for? Browse other questions tagged or ask your own question.