Skip to main content

Explore your training options in 10 minutes

JavaScript Add Class: A Guide

Ryan Manchester - March 08, 2021

Adding a class property to an element helps the developer create a dynamic user experience on the web page. When a class property is added to an element, that selected element will assume the styling associated with that class name.

Think about a user clicking a button. When the button is clicked, we want a section of the web page to change based on our CSS stylesheet. We can assign a class name associated with that styling to the element in order to change its appearance after the button is clicked.

Creating an interactive experience is important in any front end programming. In this guide, we will explore two ways to add a class name to a selected element in plain JavaScript. By the end, you will be able to use this tool in your own projects.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

How to Use JavaScript Add Class

In JavaScript, adding a class name can be done in a couple of ways. First, we select the desired HTML element. Then, we have a choice to either use the className property or the add() method to add the class name to the element. We will go through the syntax and use in the next section.

Remember, we are using plain JavaScript here. No libraries are necessary. Because we are using regular JavaScript, a common practice is to wrap the above logic inside a function and pass that function to an event handler. This will ensure the function to add the class name will happen only after a specific event has occurred.

As far as HTML elements are concerned, they can have multiple class names. This is useful to remember because we can add class names to elements that already have other class names or ids. All we have to keep in mind is what styling is associated with what class names in our project and add the names to the elements we want to style.

JavaScript Syntax to Add a Class Name

We are going to look at two ways to add a class name to an element. Remember from the above section that wrapping the logic to add a class inside a function is a common practice. Once we have our function built, we can call it inside the onClick HTML attribute.

The first way to add a class name using plain JavaScript is to go through the className property. The logic here is to select the element, then call .className on the selected element. Then we can concatenate the class name to the element.

Let’s start with our HTML:

<div id="div">
Hello World
Add Class

Here we have a <div> with an id of “div.”  Underneath our <div> is a button. This button will be adding the class name once clicked. Now let’s take a look at an example CSS class.

.background {
  background-color: blue;
  color: white;

In our CSS file, we have the class “background.” Here it will be styled with a blue background color and the text will be white. We want to add the class name “background” to our <div> with the id “div.”

JavaScript can handle selecting the <div> in a function, like this one:

const addClass = () => {
  const element = document.getElementById('div');
  element.className += "background"

Our function called addClass will select the <div> by its id of “div.” We can store that in a variable called element. From here, we call the className property on our variable and concatenate the class name “background.” As a review, concatenation in JavaScript adds the element to a list. In other words, concatenating a class name will add that class name to the element and previously defined classes on that element will still appear.

We aren’t quite finished yet! We still have to call our addClass function somewhere. Let’s add the class name to our <div> after the button is clicked.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

<div id="div">
Hello World
<button onClick="addClass()">
Add Class

By using the JavaScript onClick method, we can call our function after the button is clicked. Let’s test it out by clicking the button.

To review what just happened, we added the class name “background” that was associated with styling in our CSS file. After we built a JavaScript function to find the element and add the class name, the class style was applied to the <div> once the button was clicked.

JavaScript add() method

Using the same example as above, let’s look at the other way to add a class name. This involves using the JavaScript add() method. Unlike the above example, we use the classList property to call add() .

Our addClass() function now looks like this:

const addClass = () => {
  const element = document.getElementById('div');

We are still getting the <div> by its id and storing it in a variable. Then we call the classList property on our variable followed by the add() method. We pass the class name “background” to add() as an argument.

The <div> now has the class “background” added to it.

We get the same result by coding it in two different ways. The choice of which one to implement in your code is yours, but the second method is more widely accepted as best practice. Using add() is considered best practice because it is less error prone than using concatenation.


In this guide, we learned how to add a class name to an element. This is useful when you have a class that is styled in the CSS file. By adding the class name to a specific HTML element, that element inherits the styling found in the CSS file.

By dynamically changing how elements look on the page, we are able to give the user an interactive experience with our app. When we write interactive applications, it feels natural and engaging to the user. It will keep them coming back to explore our app further.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Ryan Manchester

About the author: Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.

Skip to main content