How to Add a Class in JavaScript

Use classList.add() when JavaScript needs to apply a visual state, activate a component, or unlock reusable CSS behavior. This is the cleanest way to connect user actions with styles.

What you’ll build or solve

You’ll learn how to add a class in JavaScript using classList.add(). You’ll also know how to add multiple classes and when class toggling is a better fit.

When this approach works best

This approach is the right choice when the same style or UI state is reused across different interactions.

Common real-world scenarios include:

• Opening menus
• Showing modals
• Marking active tabs
• Error validation states
• Dark mode activation

This is a bad idea when the state should switch on and off repeatedly. In that case, toggle() is often cleaner.

Prerequisites

You only need:

• A basic HTML page
• A JavaScript file or <script> tag
• Basic DOM selection knowledge

Step-by-step instructions

Step 1: Select the element and add the class

Start by selecting the target element.

<div class="banner">Welcome</div>

<script>
  const banner = document.querySelector(".banner");
  banner.classList.add("visible");
</script>

You can add multiple classes at once.

banner.classList.add("visible", "highlight");

This works especially well when the class already has reusable CSS rules.

<style>
  .visible {
    display: block;
  }
</style>

What to look for:

• classList.add() adds classes without replacing existing ones
• Great for reusable UI states
• Multiple classes can be added in one call
• Cleaner than rewriting className
• Pair with CSS state classes like .active

Examples you can copy

Open menu

const menu = document.querySelector(".menu");
menu.classList.add("open");

Mark tab active

const tab = document.querySelector(".tab");
tab.classList.add("active");

Show error state

const field = document.querySelector(".email");
field.classList.add("error");

Common mistakes and how to fix them

Mistake 1: Using className and overwriting existing classes

What the reader might do:

banner.className = "visible";

Why it breaks: existing classes are replaced.

Corrected approach:

banner.classList.add("visible");

Mistake 2: Forgetting to select the element first

What the reader might do:

banner.classList.add("visible");

Why it breaks: banner is undefined if it was never selected.

Corrected approach:

const banner = document.querySelector(".banner");
banner.classList.add("visible");

Mistake 3: Using add() for toggle behavior

What the reader might do:

menu.classList.add("open");

Why it breaks: repeated clicks keep the class permanently applied.

Corrected approach:

menu.classList.toggle("open");

Troubleshooting

If the class does not apply, confirm the selector matches the HTML.

If styles still do not change, verify the CSS class actually exists.

If repeated clicks need on/off behavior, use toggle().

If existing styles disappear, switch from className to classList.add().

Quick recap

• Use classList.add() to apply classes
• Existing classes stay intact
• Great for reusable UI states
• Add multiple classes in one call
• Use toggle() for on/off states