W3cubDocs

/Web APIs

DOMTokenList: add() method

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
add 8 12 3.6 10 ≤12.1 5.1 3 18 4 ≤12.1 5 1.0
multiple_parameters 24 12 26 No 15 7 4.4 25 26 14 7 1.5

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add