Benefits of using attr() over addClass in jquery

by

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.

More Related Contents:

  1. jqGrid custom format fails on addClass
  2. Check if class already assigned before adding
  3. if checkbox checked add class to parent element
  4. delayed addclass/remove class function not working
  5. addClass and removeClass in jQuery – not removing class
  6. rocking effect in jquery? [closed]
  7. jQuery get the rendered height of an element?
  8. Change the image source on rollover using jQuery
  9. How to fire AJAX request Periodically?
  10. Show div on scrollDown after 800px
  11. Stopping fixed position scrolling at a certain point?
  12. Submit form using AJAX and jQuery
  13. How to check if click event is already bound – JQuery
  14. Sort divs in jQuery based on attribute ‘data-sort’?
  15. Toggle input disabled attribute using jQuery
  16. jQuery find element by data attribute value
  17. Populating One Select Box Based on the Selection in Another Select Box – JQuery?
  18. jquery live hover
  19. Reset select2 value and show placeholder
  20. Multiple search with multiplefields by default
  21. Twitter Bootstrap Datepicker within modal window
  22. JQuery Calculate Day Difference in 2 date textboxes
  23. jQuery .css(“left”) returns “auto” instead of actual value in Chrome
  24. how to send multiple data with $.ajax() jquery
  25. make column data as hyperlink (dataTable JQUERY)
  26. How to prevent user to enter text in textarea after reaching max character limit
  27. jQuery Mobile lock orientation
  28. Is there a style selector in jQuery?
  29. Allowing frontend JavaScript POST requests to https://accounts.spotify.com/api/token endpoint
  30. Can jQuery .load append instead of replace?

Leave a Comment