DOMTokenList: add() メソッド

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.

add()DOMTokenList インターフェイスのメソッドで、指定されたトークンをリストに追加します。既に存在する場合は何もしません。

構文

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

引数

tokenN

DOMTokenList に追加するトークン(またはトークン群)を表す文字列です。

返値

なし。

例外

SyntaxError DOMException

引数のうちの 1 つが空文字列であった場合に発生します。

InvalidCharacterError DOMException

トークンに ASCII ホワイトスペースが含まれていた場合に発生します。

以下の例では、 <span> 要素に設定されたクラスのリストを DOMTokenList として受け取るのに Element.classList を使用しています。それからリストに新しいトークンを追加し、リストを <span>Node.textContent に書き込みます。

最初に HTML です。

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

そして JavaScript です。

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

出力結果は以下のようになります。

同様に、複数のトークンを追加することができます。

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

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
add
Multiple parameters for add()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support