JavaScript: adding and removing class names from elements

Here's few different method to add and remove classes from DOM elements, with pure JavaScript.

className method

To a single element:

var el = document.getElementById('#foo');
pres[i].className = 'my-class';

But that’ll override the existing class, the following appends it to the old classes:

var el = document.getElementById('#foo');
el[i].className += ' my-class';


el.className = d.className + " my-class";

classList method

classList is pretty smart and sweet, it is definitely the future of class name manipulation! It’s supported in IE10, that might be a deal breaker or not, depending on the site.

var el = document.getElementById("div1");

// Single class

// Multiple calsses
el.classList.add("my-class", "nother-class");

It has other methods also:

  • add – Adds a class to an element’s list of classes. If class already exists in the element’s list of classes, it will not add the class again.
  • remove – Removes a class from an element’s list of classes. If class does not exist in the element’s list of classes, it will not throw an error or exception.
  • toggle – Toggles the existence of a class in an element’s list of classes
  • contains – Checks if an element’s list of classes contains a specific class

The upper list was ripped from MDN.

Here’s all the other methods in action:

var el = document.getElementById("div1");


// If my-class is set remove it, otherwise add it

if (el.classList.contains("my-class")) {
    // Has my-class in it
} else {
    // No my-class :(

Browser support

classList is only supporter in IE10 and later, also Opera Mini seems not to support it. See support table at


Here’s a nice polyfill that makes classList work in IE8 and IE9.

Manipulate classes in NodeList

Basically NodeList is an array (array-like object), manipulate elements in it with a loop:

var el = document.getElementByTagName('div');
// Loop the NodeList through
for (var i = 0; i < el.length; i++) {
    el[i].className += ' line-numbers';

Function it

I’ve come across the following helpful functions, see the sources for more info.

Add class using classList

var addClass = function(_element, _classes) {
    var classList, item, _i, _len;
    classList = _element.classList;
    for (_i = 0, _len = _classes.length; _i < _len; _i++) {
        item = _classes[_i];
        if (classList.length <= _len) {
        } else {
    return _element;


Add class Using className

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    element.className = cn+classname;

Remove class using className and regex

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "s?b"+classname+"b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;


Or this quite concise looking function for removing class names:

var removeClass = function(e, c) {
    e.className = e.className.replace(new RegExp('(?:^|s)' + c + '(?!S)'), '');



Club-Mate, the beverage →