How to Add a Class to an HTML Element with JavaScript

By the end of this page, you will understand how JavaScript adds CSS classes to existing HTML elements, why classList.add() is the preferred approach, how it differs from replacing className, and how this pattern is used in real web applications.

In JavaScript, HTML elements can have one or more CSS classes. These classes are stored in the element's class attribute.

For example:

<div class="someclass"></div>

This div currently has one class: someclass.

If you want to add another class, you usually should not overwrite the whole class attribute manually. Instead, use the DOM API designed for class management:

element.classList.add("newclass");

This matters because real applications often use classes to control:

• styling
• visibility
• animation
• validation state
• active or selected UI states

Using classList.add() is safer and clearer than rebuilding the class string yourself. It avoids accidentally removing existing classes and makes your code easier to read and maintain.

Think of an element's classes like stickers on a box.

• className = "newclass" removes all old stickers and puts on one new sticker.
• classList.add("newclass") keeps the current stickers and adds one more.

So if a box already has a sticker labeled someclass, calling classList.add("highlight") means the box now has both stickers:

• someclass
• highlight

That is exactly what you want when adding behavior or styling without destroying what is already there.

The most common syntax is:

element.classList.add("newclass");

Example 1: Add a class to a selected element

<div id="box" class="someclass">Hello</div>

<script>
  const box = document.getElementById("box");
  box.classList.add("active");
</script>

After this runs, the HTML behaves like this:

<div id="box" class="someclass active">Hello</div>

The original class stays, and the new class is added.

Example 2: Add multiple classes

box.classList.(, , );

Consider this example:

<div id="message" class="note">Saved</div>

<script>
  const message = document.getElementById("message");
  message.classList.add("success");
</script>

Step by step:

1. The browser reads the HTML.
2. It creates a div element with:
   • id = message
   • class = note
3. document.getElementById("message") finds that element.
4. The variable message now refers to that div.
5. message.classList.add("success") adds a new class.
6. The element now has two classes:

Adding classes with JavaScript is very common in frontend development.

Common uses

• Show or hide UI elements
  • Add a class like hidden or open
• Form validation
  • Add error or valid after checking input
• Active navigation links
  • Add active to the current menu item
• Theme switching
  • Add dark-mode to the page or a container
• Animations
  • Add fade-in or shake to trigger CSS animations
• Loading states
  • Add loading while waiting for API data

Example: Show a menu

const menu = document.getElementById("menu");
menu..();

In real projects, developers usually combine classList.add() with DOM events, validation, and state changes.

Common patterns

Guard clauses

Check that the element exists before using it:

const modal = document.getElementById("modal");
if (!modal) return;

modal.classList.add("visible");

This prevents runtime errors when the element is missing.

Event-driven UI

const button = document.getElementById("toggleButton");
const panel = document.getElementById("panel");

button.addEventListener("click", () => {
  panel.classList.add("open");
});

Validation feedback

function () {
  input..();
}

1. Replacing all classes by mistake

Broken code:

element.className = "newclass";

Problem:

• This removes all existing classes.

Better:

element.classList.add("newclass");

2. Forgetting to select the element first

Broken code:

classList.add("active");

Problem:

• classList belongs to an element, not the whole document.

Better:

const element = document.getElementById("box");
element.classList.add("active");

3. Using className += incorrectly

Broken code:

classList.add() vs

Quick syntax

element.classList.add("newclass");

Select an element first

const element = document.getElementById("box");

Add one class

element.classList.add("active");

Add multiple classes

element.classList.add("active", "visible");

Check if a class exists

element.classList.contains("active");

Remove a class

element.classList.remove("active");

Toggle a class

How do I add a class without removing existing classes in JavaScript?

Use:

element.classList.add("newclass");

This adds the new class and keeps the old ones.

What is the difference between classList.add() and className?

classList.add() adds a class safely. className sets the full class string, so it can replace all existing classes.

Can I add more than one class at once?

Yes:

element.classList.add("active", "visible");

What if the element already has that class?

classList.add() will not add it again in the normal way. The class remains present once.

Why is my code saying Cannot read properties of null?

Your element was probably not found yet. Make sure:

• the selector is correct
• the script runs after the element exists

Can I add a class to many elements at once?

• DOM selection — You need to find an element before changing its classes.
• classList.remove() — This is the opposite of adding a class.
• classList.toggle() — Useful when a class should switch on and off.
• CSS selectors — Classes become useful when CSS targets them.
• Event listeners — Classes are often added in response to clicks, input, or other events.
• DOMContentLoaded — Helps ensure the element exists before your script runs.
• HTML attributes — The class attribute stores class names on an element.