The add()
method of the DOMTokenList
interface adds the given tokens to the list, omitting any that are already present.
DOMTokenList.add()
Syntax
add(token0); add(token0, token1); add(token0, token1, /* ... ,*/ tokenN)
Parameters
-
tokenN
-
A string representing a token (or tokens) to add to the
DOMTokenList
.
Return value
None.
Exceptions
-
SyntaxError
DOMException
-
One of the arguments is the empty string
-
InvalidCharacterError
DOMException
-
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:
<span class="a b c"></span>
Now the JavaScript:
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:
span.classList.add("d", "e", "f");
Specifications
Specification |
---|
DOM Standard # ref-for-dom-domtokenlist-add① |
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
|
≤37
|
25
|
26
|
14
|
7
|
1.5
|
© 2005–2021 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