4 easy ways to add class to an element using JavaScript

This post was originally published at webinuse.com

When working with DOM we often find ourselves in need to manipulate elements’ class. Today we are going to work on how to add class to an element using JavaScript. We will explore 4 ways on how to add class to any element in the DOM, including body and html element.

Add class using className

The most straightforward way of adding a class is using className propery. It is a “native” way of adding class to an element.className has the simple syntax:

el.className = "new-class"

/**
 * We can first create an element
 * than add class to it
 * */

 let el = document.createElement("div");
 el.className = "example-class";
 console.log(el);

 //Result:
 //<div class="example-class"></div>

 /**
  * We can use the same technique
  * to add a class to existing
  * element in the DOM
  * */

  let el = document.getElementById("el");
  el.className = "example-class";
  console.log(el);

  //Result:
  //<div id="el" class="example-class"></div>

Regardless of whether we selected an element or created a new one, we can use className property.

Note: We need to be aware of the fact that if our element already has class(es), className property will overwrite it.

classList property

The second way of adding class to an element is by using .classList property. It is also a “native” way of adding new classes to elements. Whether we created an element or selected an existing element, we can use the .classList property.

According to MDN: The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

One of the methods that .classList property offers is .add() method. This method is used to add a class to an element.

Let’s take a look at the example:

/**
 * We can first create an element
 * than add class to it
 * */

 let el = document.createElement("div");
 el.className = "example-class";
 el.classList.add("another-class");
 console.log(el);

 //Result:
 //<div class="example-class another-class"></div>

 /**
  * We can use the same technique
  * to add a class to existing
  * element in the DOM
  * */

  let aa = document.getElementById("el");
  aa.className = "example-class";
  aa.classList.add("another-class");
  console.log(aa);

  //Result:
  //<div id="el" class="example-class"></div>

We can leverage .add() method to add multiple classes at once as shown in the example below.

/**
 * First we select/create an element
 * */

 let el = document.createElement("div");
 el.classList.add("first-class", "second-class", "third-class");
 console.log(el);

 //Result:
 //<div class="first-class second-class third-class"></div>

As we can see, the syntax is pretty straightforward. For every new class, we want to add, we separate it by a comma.

el.classList.add("class1", "class2", ..., "classN")

Add class using setAttribute method

This is the third way of adding class to an element. We can set class by using .setAttr() method, even though it is more of a hack than native way of adding class. Still, it can be useful sometimes.

/**
 * First we select/create an element
 * */

 let el = document.createElement("div");
 el.setAttribute("class", "example-class");
 console.log(el);

 //Result:
 //<div class="example-class"></div>

NOTE: Same as with .className .setAttribute() will overwrite any class we already had.

toggle method

We already talked about .classList. But we only talked about .add() method. There is another method that can add class IF class doesn’t already exist, on that very element. Otherwise, it will remove it.

/**
 * First we need to create/select element
 * */

 let el = document.createElement("div");
 el.classList.toggle("example-class");
 console.log(el);

 //Result:
 //<div class="example-class"></div>

 //Now we will add another class
 //using .add()

 el.classList.add("another-class");
 console.log(el);

 //Result:
 //<div class="example-class another-class"></div>

 /**
  * Now, if we use .toggle() with .another-class
  * .another class will be removed
  * */

  el.classList.toggle("another-class");
  console.log(el);

  //Result:
  //<div class="example-class"></div>

As we can see from the example above, .toggle() method has simple syntax, same as .add() method.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like Update WordPress URL easily using MySQL.