addClass vs attr and creating an ID

Question

So what I am reading is that when adding a class to an element without any class already assigned, still use the addClass() method over attr().

For example, using:

.addClass('myclass')

is more efficient than

.attr('class','myclass')

I cannot find anything equivalent to addId('myid') for adding id selectors, does it exist or is attr() the best way to add an id selector?

I get that id is unique, the logic behind my question is addClass() is faster than attr().

So my question is if there's a more efficient method for creating an id than attr().

I totally get that, but the point is it's addClass which is faster, meaning attr is the slower function. Are you saying it's only slower for classes but not ids? — Aaron, Jun 20 '13 at 23:22
@Aaron, what benchmarks have you run to prove that `addClass` is faster than `attr`? Which browsers did you check? What bottlenecks were you running performance analysis on? Why does the speed of the function matter for a language that spends most of its time in an idle environment? — zzzzBov, Jun 20 '13 at 23:26
@Aaron the apparent difference in run-time is probably negligible for the efficiency of an application. However, you should be concerned about the difference of the behavior as described by the answers below. — Shamim Hafiz - MSFT, Jun 20 '13 at 23:29
@ShamimHafiz I completely understand the difference in behaviour, wasn't what my question asks for thanks :) — Aaron, Jun 20 '13 at 23:33
@zzzzBov if you read a bit online, you will see many sources say addClass is faster than attr. — Aaron, Jun 20 '13 at 23:36
My test shows that `attr()` is almost 50% faster than `addClass()`. http://jsperf.com/addclass-performance. But it probably depends on the starting conditions (in my test, the elements don't have a class to start with, so the two functions have the same effect). — Barmar, Jun 20 '13 at 23:36
@Aaron, "read a bit online" as in read some articles (which you have not cited)? I ask because real data beats articles always. The jsperf you provided disproves your own statement. — zzzzBov, Jun 20 '13 at 23:39
I'm guessing the answer is going to be 'no, there isn't any more efficient way of adding id selectors' — Aaron, Jun 20 '13 at 23:51

Starx · Accepted Answer · 2013-06-20T23:53:23.027

Answering directly

No, addId() does not exist and addClass() is not as same as attr()

In HTML, a class attribute can hold more than one value like <div class="tall fat brown">Someone</div> so jQuery's function addClass() helps to add a value to the class attribute not change it. Similarly the functions toggleClass() and 'removeClass()` help manipulate them.

But the function attr() will just manipulate the attribute and change it directly.

For example:

<div id="person">someone</div>

And the following jQuery Statements

$("#div").addClass("tall"); // This will create the class attribute and add tall 
$("#div").addClass("fat");  // This will append fat to the existing class and make "tall fat"
$("#div").addClass("brown"); // likewise

.addClass() will just append the class name. If same needs to done by using attr() you have to do

$("#div").attr('class', 'tall');
$("#div").attr('class', 'tall fat');
$("#div").attr('class', 'tall fat brown');

Or, you can modify the attribute using

$("#div").attr('class', function(i, className) {
    return className + " brown";
});

Where as ids have one value that needs to be modified or altered so a function like addId() would do exactly which attr('id', 'idvalue') would do.

Well, sort of, but with `attr()` you could also do `$('#div').attr('class', function(i,c){ return c + ' brown'; });` (as an alternative to the last line of the `attr()` code-block). So you don't need to explicitly know, in advance, what the pre-existing values are. — David Thomas, Jun 20 '13 at 23:36
One important difference between `.addClass()` and modifying the class attribute string yourself with `.attr()` is that `.addClass()` will ensure that the there are no duplicated class names (i.e. "tall fat fat brown tall brown" will collapse to just "tall fat brown"). — Lie Ryan, May 13 '14 at 07:35

score 1 · Answer 2 · answered Jun 20 '13 at 23:26

The behavior of .addClass() is different from .attr().

With .addClass() you can add existing class to the ones previously added, however .attr() will overwrite existing classes.

Also, each element has just one id, therefore it doesn't make sense to provide a way to add another with a function like addId().

Sushanth -- · Answer 3 · 2013-06-20T23:28:36.687

Add class will make sure to appends the className

But

.attr('class','myclass') overwrites the existing classes with myclass

<div class="a b c"> </div>

$('a.div').addClass('myclass');

Your div will look like this

<div class="a b c myclass"> </div>

But if your add it as an attribute, it will overwrite the other classes

$('a.div').attr('class', 'myclass');

   <div class="myclass"> </div>

So now you cannot select the element with $('div.a') since that div no longer has the class in question..

addClass vs attr and creating an ID

3 Answers3