The DOM: Add a class to an element

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

When you have a DOM element reference you can add a new class to it by using the add method:

element.classList.add('myclass')

You can remove a class using the remove method:

element.classList.remove('myclass')

Implementation detail: classList is not an array, but rather it is a collection of type DOMTokenList.

You cannot directly modify classList because it’s a read-only property. You can, however, use its methods to change the element’s classes.

0:	Introduction
1:	The `window` object
2:	The `document` object
3:	Types of nodes
4:	Traversing the DOM
5:	Editing the DOM
6:	Selectors API
7:	DOM Ready
8:	▶︎ Add a class to an element
9:	Remove a class from an element
10:	Check if element has a class
11:	Change a DOM node value
12:	Loop through DOM elements
13:	Add an image to the DOM
14:	Create a DOM attribute
15:	Remove children elements
16:	Replace a DOM element
17:	insertAdjacentHTML
18:	Add click events to a list