22

Example HTML:

<div id="foo" class="class_one"></div>

How can I add the class class_two without replacing class_one?

end result:

<div id="foo" class="class_one class_two"></div>
0

4 Answers 4

65

See deekshith's answer below if you only need to support new browsers

Standard javascript:

document.getElementById('foo').className += ' class_two'

or JQuery:

$('#foo').addClass('class_two');
0
21

You may use jQuery.

$('#YourElement').addClass('YourClass'); //add

$('#YourElement').removeClass('YourClass'); //remove

$('#YourElement').toggleClass('YourClass'); //toggle

Or Javascript, if you wish.

document.getElementById('id').classList.add('YourClass'); //add
document.getElementById('id').classList.remove('YourClass'); //remove
1
  • classList is available on most modern browsers monhttp://caniuse.com/#feat=classlist
    – Bert Lamb
    Apr 6, 2016 at 19:34
18

A better way to add a class would be to use Element.classList.add():

document.getElementById('foo').classList.add("class_two");
3

You can make life easier with a couple of helper functions:

function addClass(el, className) {
  var classes = el.className.match(/\S+/g) || [];  

  if (!hasClass(el, className)) {
    classes.push(className);
  }
  el.className = classes.join(' ');
}

function hasClass(el, className) {
  var re = new RegExp('(^|\\s+)' + className + '(\\s+|$)');
  return re.test(el.className);
}

addClass(document.getElementById('foo'), 'bar')

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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