---
title: DOMTokenList.add()
slug: Web/API/DOMTokenList/add
translation_of: Web/API/DOMTokenList/add
---
<p>{{APIRef("DOM")}}</p>

<p>Die <code><strong>add()</strong></code> Methode des {{domxref("DOMTokenList")}} Interfaces, fügt ein <em>token</em> der Liste an.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">tokenList.add(token1[, token2[, ...]]);</pre>

<h3 id="Parameter">Parameter</h3>

<dl>
 <dt>token</dt>
 <dd>Ein {{domxref("DOMString")}} ,welches das <em>token</em> repräsentiert, welches an die Liste angefügt werden soll.</dd>
</dl>

<h3 id="Rückgabewert">Rückgabewert</h3>

<p><code>undefined</code></p>

<h2 id="Beispiele">Beispiele</h2>

<p>Im folgenden Beispiel erhalten wir die Liste der Klassen eines {{htmlelement("span")}} Elementes als <code>DOMTokenList</code>  , mit Hilfe von {{domxref("Element.classList")}}. Wir fügen der Liste dann ein neues <em>token</em> an und schreiben die Liste als inhalt in das <code>&lt;span&gt;.</code></p>

<p>Das HTML:</p>

<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>

<p>Nun das JavaScript:</p>

<pre class="brush: js">var span = document.querySelector("span");
var classes = span.classList;
classes.add("d");
span.textContent = classes;
</pre>

<p>Die Ausgabe:</p>

<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>

<p>Man kann auch mehrere <em>tokens</em> auf einmal hinzufügen:</p>

<pre class="brush: js">span.classList.add("d", "e", "f");
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<div>

<p>{{Compat("api.DOMTokenList.add")}}</p>
</div>