How to Add a Class to an Element with ES6

With the inclusion of ES6, modern web browsers now have a version of JavaScript with new functionality that makes life for web developers much easier. One of the most useful updates in ES6 is the inclusion of the classList property. This property is an alternative to the widely-used className property, but classList has a few new and very useful methods to work with element class names. Today, I’ll discuss and utilize JavaScript’s classList.add() method in this easy-to-follow article, which will help us add a class to an element with ES6.

About the classList.add() method

If a developer needed to add a class name to an element using JavaScript, a rookie developer would use jQuery to accomplish that task. Annoying? Unnecessary? Of course it is!

I personally knew developers who would including the jQuery library into their project just so they could add another class to an HTML element. Many didn’t factor in the small but obvious sacrifice to SEO by making a user download jQuery as a resource just for simple class name addition.

How to use the classList.add() method in ES6

The basic syntax of the classList.add() method and its usage is fairly easy to understand. You’ll be adding a class to an element using ES6 in no time.

For this example, let’s assume that we have an element with the ID of mydiv. Let’s create a variable object for it to make our code easier to understand.

let el = document.getElementById('mydiv');

Now we can use the classList property with the add method. Let’s add the class “green” to the element noted above in the variable el.

el.classList.add('green');

We just added the class green to the mydiv element with ES6! When using the classList.add method, please note that if the element already contains the class you attempt to add with the classList.add function, no error will be thrown. It’s honestly that easy.

Add a Class to an Element Without ES6

In the prehistoric years of JavaScript before the arrival of ES6, you needed to perform some mildly obnoxious string functions to add a class to an element without ES6. I’ll run you through an example of adding a class with the example below.

Create the variable el as a variable object for easy element targeting through JavaScript.

var el = document.getElementById('mydiv');

Next, get the className string containing all the class names of the el object variable and split the array into a string filled in with spaces between class names.

var a = el.className.split(" ");

Finally, check if the class name you want to add already exists in the list of classes on the element.

var newClass = "mynewclass";
if (a.indexOf(newClass) == -1) {
  // if classname doesn't already exist, add it
  a.className += " " + newClass;
}