Javascript setAttribute Vs jquery multiple attribute setter

Question

I want to set so many attributes for multiple elements. Javascript always give better performance when comparing to jquery.

i want to know which one gives better performance when settling multiple attributes via jquery and javascript.

Jquery multiple attribute setter:

$(element).attr({'id': 'id1', 'index':1, 'value':10,'check':'checked'});

using javascript setAttribute :

element.setAttribute('id','id1');
element.setAttribute('index','1');
..................................

when am using javascript i need to write multiple lines. otherwise need to create custom function for this.

can anyone explain which one gives better performance ? and why ?

Thanks,

Siva

Unless you are talking about 100s of elements and 10s of properties, the cleaner .attr() way is the way to go. — techfoobar
– techfoobar, Commented Nov 27, 2013 at 6:20
@techfoobar am going to set more than 100 properties for more than 100 elements in a iteration.which one is best and why ? — SivaRajini
– SivaRajini, Commented Nov 27, 2013 at 6:22
Why are you setting attributes when setting properties is likely faster and more appropriate? — RobG
– RobG, Commented Nov 27, 2013 at 6:24
A lot of those 100 properties i assume will be custom properties. It may be better to have one JS object containing all those and store it in one go using .data(). As for the HTML defined properties, vanilla will likely be faster since you have so many elements. Use jsperf.com to know the exact performance implications. — techfoobar
– techfoobar, Commented Nov 27, 2013 at 6:25

Krasimir · Accepted Answer · 2013-11-27 06:33:51Z

3

Here is a jsperf which tests setting of attributes. I'm not sure that it covers your situation but as the others said - pure javascript is a lot faster then using a library. (I'm not even sure that the jsperf is a valid one. I mean if it test what you need).

http://jsperf.com/aaa-setting-attribute

jQuery version is 66% slower then the pure javascript variant.

answered Nov 27, 2013 at 6:33

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergio · Accepted Answer · 2013-11-27 06:25:29Z

1

Computers cost much less than programmers.

Let's say:

Using pure js will make code run for 1ms, and programmer work 3 hours.

Using jQuery will make code run for 2ms and programmer work 1 minute

See profit?

answered Nov 27, 2013 at 6:25

Sergio

6,9485 gold badges33 silver badges55 bronze badges

5 Comments

RobG Over a year ago

Do you seriously think it would take 3 hours to do this with plan JS?

Salman Arshad Over a year ago

@RobG: depends on the programmer :)

Sergio Over a year ago

Of course no :), just exaggregating. But imagine if you need to change smth in that code :)

RobG Over a year ago

@sergio–You are presuming that someone who can do the above with jQuery is so clueless as to be unable to write a simple function with 4 lines of code. As soon as the requirement goes beyond multiple properties for one element (e.g. multiple elements and multiple properties) then POJS becomes part of the solution anyway and the complexity and maintainability issues become virtually identical either way. The only difference is that a POJS solution doesn't required the programmer to also know jQuery.

dsoosh Over a year ago

Why would you ever assume the total value of time and resources wasted by executing a sub-optimal code to be lower than the time used to develop the code? I'm not saying the performance is what matters most, but if you may gain something with a relatively small cost (or no cost at all), then why not use it?

RobG · Accepted Answer · 2013-11-27 06:27:36Z

1

You should probably be setting properties, not attributes, as they are more consistent across browsers and have a more consistent effect on DOM elements (sometimes setting an attribute affects the property, sometimes it doesn't). Setting the property nearly always has the desired affect (e.g. setting a checkbox to checked), setting the related attribute doesn't always.

You can also use a small function if you want to set multiple properties on an element:

function setProperties(element, props) {
  for (var prop in props) {
    if (props.hasOwnProperty(prop)) {
      element[prop] = props[prop];
    }
  }
}

I can't see that it would be any slower than jQuery.

answered Nov 27, 2013 at 6:27

RobG

148k32 gold badges180 silver badges216 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:28:27Z

-1

jQuery is a library, so I think it better than pure javascript. It help you to use javascript easier. I supposed that! You can see the same question here

If you want to get all of attributes of element, you can see here also.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Nov 27, 2013 at 6:32

Ringo

3,9973 gold badges26 silver badges39 bronze badges

1 Comment

RobG Over a year ago

Opinions should be expressed as comments, not answers.

Collectives™ on Stack Overflow

Javascript setAttribute Vs jquery multiple attribute setter

4 Answers 4

Comments

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related