4 easy ways to add class to an element using JavaScript
Tags: javascript, beginners, tutorial
Published: 2021-11-13 23:12:05

*This post was originally published at [webinuse.com](https://webinuse.com/add-class-to-an-element-using-javascript/)*

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"`

```javascript
/**
 * 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](https://webinuse.com/how-to-select-elements-using-vanilla-javascript/) 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), <meta charset="utf-8">`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](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList): 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:

```javascript

/**
 * 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.

```javascript

/**
 * 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.

```javascript

/**
 * 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.

```javascript

/**
 * 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](https://webinuse.com/arrow-functions-in-javascript/href=), or you can read some of my other articles like [Update WordPress URL easily using MySQL](https://webinuse.com/update-wordpress-url-after-migration-using-mysql/).