HTMLSpanElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLSpanElement extends HTMLElement

Beschreibung

HTMLSpanElement ist die DOM-Schnittstelle für das HTML-Element . Das ist ein allgemeiner Inline-Container ohne eigene Bedeutung. Man nutzt ihn, um Textteile für Styling, Skripte oder Datenattribute zu markieren, zum Beispiel für Hervorhebungen, Badges, Zähler oder dynamisch aktualisierte Werte.

Die Schnittstelle definiert keine eigenen Eigenschaften oder Methoden. Alles kommt aus der Vererbungskette HTMLElement → Element → Node → EventTarget. Dazu gehören etwa textContent, classList, dataset, style, hidden und addEventListener().

Ein HTMLSpanElement erstellt man mit document.createElement('span'). Einen direkten Konstruktoraufruf (new HTMLSpanElement()) gibt es nicht. Mit instanceof HTMLSpanElement prüft man zur Laufzeit, ob ein Knoten wirklich ein  ist. Das ist nützlich bei Typprüfungen, bei der Ereignisdelegation und in TypeScript.

Rückgabewert

Typ

HTMLSpanElement

Beschreibung

Instanzen entstehen über document.createElement('span') oder durch Abfragen des DOM, z. B. mit querySelector('span').

Beispiele

Span erzeugen und einfügen

const badge = document.createElement('span');
badge.textContent = 'Neu';
badge.classList.add('badge', 'badge--info');
badge.dataset.status = 'new';

document.querySelector('h2')?.append(' ', badge);

console.log(badge instanceof HTMLSpanElement);
console.log(badge.outerHTML);

true Neu

Live-Zähler in einem Span aktualisieren

// HTML: <p>Warenkorb: <span id="cart-count">0</span> Artikel</p>
const counter = document.getElementById('cart-count');

const addToCart = () => {
  const current = Number(counter.textContent);
  counter.textContent = String(current + 1);
};

addToCart();
addToCart();
console.log(counter.textContent);

2

Typprüfung bei Ereignisdelegation

// Klicks auf Schlagwort-Spans in einer Liste abfangen
document.querySelector('#tags')?.addEventListener('click', (event) => {
  const target = event.target;
  if (target instanceof HTMLSpanElement && target.dataset.tag) {
    console.log(`Filter nach: ${target.dataset.tag}`);
    target.classList.toggle('active');
  }
});

Suchbegriff sicher hervorheben

const highlight = (container, text, term) => {
  container.replaceChildren();
  const parts = text.split(term);
  parts.forEach((part, i) => {
    container.append(part); // als Text eingefügt, kein HTML
    if (i < parts.length - 1) {
      const mark = document.createElement('span');
      mark.className = 'hit';
      mark.textContent = term;
      container.append(mark);
    }
  });
};

const p = document.createElement('p');
highlight(p, 'JavaScript und Java', 'Java');
console.log(p.innerHTML);

JavaScript und Java

// Wichtig · Fallstricke

Keine eigene Semantik:  hat für Screenreader keine Bedeutung. Für Hervorhebungen besser ,  oder  verwenden. Klickbare Spans brauchen role="button", tabindex="0" und eine Tastaturbedienung. Noch besser ist gleich ein <button>.
Kein Konstruktor: new HTMLSpanElement() wirft einen TypeError („Illegal constructor“). Stattdessen document.createElement('span') verwenden.
XSS: Nutzereingaben immer über textContent setzen, nicht über innerHTML.
Inline-Element: width und height wirken erst mit display: inline-block oder block.
Kompatibilität: Wird von allen Browsern unterstützt. Sehr alte Browser lieferten für  teils nur ein HTMLElement, heute spielt das keine Rolle mehr.

Siehe auch

HTMLPreElement HTMLHeadElement HTMLMapElement HTMLSlotElement HTMLAreaElement