DOMTokenList: add() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The add() method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

Syntax

js
add(token1) add(token1, token2) add(token1, token2, /* …, */ tokenN) 

Parameters

tokenN

A string representing a token (or tokens) to add to the DOMTokenList.

Return value

None.

Exceptions

SyntaxError DOMException

Thrown if one of the arguments is an empty string

InvalidCharacterError DOMException

Thrown if a token contains ASCII whitespace.

Examples

In the following example, we retrieve the list of classes set on a <span> element as a DOMTokenList, using Element.classList. We then add a new token to the list, and write the list into the <span>'s Node.textContent.

First, the HTML:

html
<span class="a b c"></span> 

Now the JavaScript:

js
const span = document.querySelector("span"); const classes = span.classList; classes.add("d"); span.textContent = classes; 

The output looks like this:

You can add multiple tokens as well:

js
span.classList.add("d", "e", "f"); 

Specifications

Specification
DOM
# ref-for-dom-domtokenlist-add①

Browser compatibility