How to add a class to a given element in JavaScript?

Here’s a detailed explanation with multiple examples for adding classes to DOM elements in JavaScript:

1. Modern Method: `classList.add()` (Recommended)

The classList API provides clean methods for class manipulation.

Basic Usage:

// Get element
const div = document.getElementById('myDiv');

// Add single class
div.classList.add('active');

// Add multiple classes
div.classList.add('highlight', 'animated', 'spin');

Key Features:

Automatically avoids duplicates
Handles spacing between classes
Chainable methods:

  div.classList.add('bold').remove('italic');

2. Adding Classes in Different Scenarios

Example 1: Adding to Multiple Elements

// Get all elements with class 'item'
const items = document.querySelectorAll('.item');

// Add class to all matching elements
items.forEach(item => {
  item.classList.add('updated');
});

Example 2: Conditional Class Addition

const button = document.querySelector('#submitBtn');

if (user.isPremium) {
  button.classList.add('premium-style');
}

Example 3: Adding Class After Delay

setTimeout(() => {
  document.querySelector('.notification').classList.add('visible');
}, 1000);

3. Legacy Method: `className` Property

Direct string manipulation (for older browsers):

Basic Example:

const element = document.getElementById('oldElement');

if (!element.className.includes('newClass')) {
  element.className = element.className 
    ? `${element.className} newClass` 
    : 'newClass';
}

Safer Implementation:

function addClassLegacy(element, className) {
  const classes = element.className.split(' ');
  if (!classes.includes(className)) {
    classes.push(className);
    element.className = classes.join(' ').trim();
  }
}

// Usage
addClassLegacy(document.body, 'dark-mode');

4. Working with Dynamic Elements

Add classes to newly created elements:

// Create new element
const newCard = document.createElement('div');

// Add classes during creation
newCard.className = 'card animated';

// Or using classList
newCard.classList.add('featured', 'shadow-lg');

// Insert into DOM
document.body.appendChild(newCard);

5. Related Class Methods

The classList object has several useful methods:

Method	Example	Description
`remove()`	`div.classList.remove('old')`	Remove class
`toggle()`	`div.classList.toggle('hidden')`	Toggle class
`replace()`	`div.classList.replace('old', 'new')`	Replace class
`contains()`	`if (div.classList.contains('active'))`	Check for class

6. Real-World Examples

Example 1: Form Validation Feedback

const emailInput = document.getElementById('email');

emailInput.addEventListener('blur', () => {
  if (!isValidEmail(emailInput.value)) {
    emailInput.classList.add('error');
    emailInput.nextElementSibling.classList.add('show-error');
  }
});

Example 2: Adding Class on Scroll

window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  header.classList.add('scrolled');
});

Example 3: Adding Class to Parent Element

document.querySelectorAll('.menu-item').forEach(item => {
  item.addEventListener('click', (e) => {
    e.currentTarget.parentElement.classList.add('active-parent');
  });
});

7. Important Considerations

Performance: classList is optimized in modern browsers
Browser Support:

classList: IE10+ (full support)
className: All browsers

Special Characters: Classes with special characters need escaping

   element.classList.add('w-full'); // Valid
   element.classList.add('2xl'); // Valid
   element.classList.add('hover:bg-blue'); // Valid

8. Best Practices

Prefer classList for modern applications
Use CSS for style changes when possible
Cache elements when working with multiple class operations
Remove unused classes to maintain clean DOM

Full Feature Implementation

class ClassManager {
  constructor(selector) {
    this.element = document.querySelector(selector);
  }

  add(...classes) {
    this.element.classList.add(...classes);
    return this; // Allow chaining
  }

  remove(...classes) {
    this.element.classList.remove(...classes);
    return this;
  }

  toggle(className) {
    this.element.classList.toggle(className);
    return this;
  }
}

// Usage
const menu = new ClassManager('#main-menu');
menu.add('collapsed').remove('expanded').toggle('dark-theme');

This comprehensive approach gives you multiple patterns to work with class manipulation in different scenarios. The classList method should be your primary choice unless you specifically need to support legacy browsers.

1. Modern Method: classList.add() (Recommended)