add method of the classList object

The add method of the classList object allows you to add CSS classes to an element.

Syntax

javascriptelement.classList.add(class);

Example

Let's add the class kkk to an element:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.add('kkk');

The code execution result:

html<p id="elem" class="www ggg zzz kkk"></p>

Example

Let's add the class zzz to an element, which is already in the element - nothing will happen, since duplicate classes are not added:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.add('zzz');

The code execution result:

html<p id="elem" class="www ggg zzz"></p>

See also