Benefits of using attr() over addClass in jquery

Question

What are the benefits of using attr() instead of using addClass() in jquery?

Answer 1

When you use attr method to set the class of any element it will override the existing class name with whatever value you pass as the second argument to attr method.

Where as if you use addClass method to add any class to an element it will just add the class and also retain the existing classes. If the class to add already exists then it will just ignore it.

E.g.

<div id="div1" class="oldClass"></div>

Using $('#div1').attr('class', 'newClass') will give

<div id="div1" class="newClass"></div>

Where as using $('#div1').addClass('newClass') will give

<div id="div1" class="oldClass newClass"></div>

So it is always adviseable to use addClass/removeClass to manupulate classes of html elements using jQuery. But at the end it depends on your requirement what to use when.

Answer 2

addClass() has several benefits over manipulating the class with attr('class'):

• It's semantically clearer. addClass and removeClass manipulate the element's class attribute (or className property), and that's about it. It's a little more difficult for them to make the code lie to you. If you said $whatever.addClas("selected"), you'd get a runtime error, whereas if you said $whatever.attr('clas', 'selected'), it just wouldn't appear to do anything. It'd still "work" from JS's point of view, though, because who knows? You could want to set a clas attribute. That's the kind of thing that happens when you try to use a Swiss army knife as a can opener.

• It works with multiple classes. If you use attr to add and remove CSS classes, and there will ever be more than one (which is rather common, actually), you'd have to do some string processing to make sure not to disturb any other applied classes or have the same class repeated 50 times. addClass and removeClass do that for you.

• It's apparently a lot faster.

I can't really think of any benefits of attr('class'...) over addClass. Generally, attr is for when you don't have some other built-in way to manipulate the attribute. In this case you do, so you should probably use that.

Answer 3

attr(a,b) sets an element's "a" attribute to "b".

addClass(a) adds the "a" class to an element

for example...

Html

<div id="box" class="myClass"></div>

Script

$("#box").attr("class", "myOtherClass");

Result

<div id="box" class="myOtherClass"></div>

And...

Html

<div id="box" class="myClass"></div>

Script

$("#box").addClass("myOtherClass");

Result

<div id="box" class="myClass myOtherClass"></div>

jQuery Links:

http://api.jquery.com/attr/

http://api.jquery.com/addClass/

Answer 4

.addClass() is MUCH better for performance.

Check out this guide to jQuery performance: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

One of my favorite articles.

Answer 5

The only benefit of attr() I know if is that it works with SVG, addClass() does not.

This answer has some details https://stackoverflow.com/a/10257755/2393562