How to add a class to a given element?

I have an element that already has a class:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Now, I want to create a JavaScript function that will add a class to the div (not replace, but add).

How can I do that?

If you're only targeting modern browsers:

Use element.classList.add to add a class:

element.classList.add("my-class");

And element.classList.remove to remove a class:

element.classList.remove("my-class");

If you need to support Internet Explorer 9 or lower:

Add a space plus the name of your new class to the className property of the element. First, put an id on the element so you can easily get a reference.

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

Then

var d = document.getElementById("div1");
d.className += " otherclass";

Note the space before otherclass. It's important to include the space otherwise it compromises existing classes that come before it in the class list.

Add Class

Cross Compatible

In the following example we add a classname to the <body> element. This is IE-8 compatible.

var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';

This is shorthand for the following..

var a = document.body;
if (a.classList) {
    a.classList.add('wait');
} else {
    a.className += ' wait';
}

Performance

If your more concerned with performance over cross-compatibility you can shorten it to the following which is 4% faster.
```
var z = document.body;
document.body.classList.add('wait');
```

Convenience

Alternatively you could use jQuery but the resulting performance is significantly slower. 94% slower according to jsPerf
```
$('body').addClass('wait');
```

Removing the class

Performance

Using jQuery selectively is the best method for removing a class if your concerned with performance
```
var a = document.body, c = ' classname';
$(a).removeClass(c);
```

Without jQuery it's 32% slower

var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;

References

jsPerf Test Case: Adding a Class
jsPerf Test Case: Removing a Class

Using Prototype

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

Using YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

Another approach to add the class to element using pure JavaScript

For adding class:

document.getElementById("div1").classList.add("classToBeAdded");

For removing class:

document.getElementById("div1").classList.remove("classToBeRemoved");