SVGStringList.appendItem() — Methode · JavaScript-Referenz

Signatur

SVGStringList.prototype.appendItem(newItem)

Beschreibung

Die Methode appendItem() der Schnittstelle SVGStringList hängt einen neuen String an das Ende der Liste an. SVGStringList kommt vor allem bei den Bedingungs-Attributen aus SVGTests vor, also bei element.systemLanguage und element.requiredExtensions. Diese Attribute legen fest, ob ein SVG-Element (etwa innerhalb von <switch>) gerendert wird.

Die Liste ist live mit dem Attribut verbunden. Nach appendItem() steht der neue Wert sofort im Markup, z. B. systemLanguage="en, de". Deshalb bewertet der Browser die Bedingung auch neu. So lässt sich die Sprach- oder Feature-Auswahl in einem <switch> zur Laufzeit ändern, ohne Attribut-Strings von Hand zusammenzusetzen.

Im Gegensatz zu Arrays hat SVGStringList keine Methode push(). Zum Durchlaufen dienen numberOfItems (bzw. length) und getItem(index). In neueren Browsern ist die Liste außerdem iterierbar, sodass for…of funktioniert.

Parameter

Name	Typ	Default	Beschreibung
$newItem Pflicht	string		Der String, der am Ende der Liste eingefügt wird, z. B. ein Sprachkürzel wie `"de"` oder eine Erweiterungs-URI. Andere Werte werden in einen String umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der eingefügte String, also der Wert, der jetzt der letzte Eintrag der Liste ist.

Beispiele

Sprache zu systemLanguage hinzufügen

const svgNS = 'http://www.w3.org/2000/svg';
const text = document.createElementNS(svgNS, 'text');
text.setAttribute('systemLanguage', 'en');

const langs = text.systemLanguage; // SVGStringList
const added = langs.appendItem('de');

console.log(added);
console.log(langs.numberOfItems);
console.log(text.getAttribute('systemLanguage'));

de 2 en, de

Sprachvarianten in einem <switch> dynamisch erweitern

// <svg><switch>
//   <text id="gruss" systemLanguage="fr">Bonjour</text>
//   <text>Hello</text>
// </switch></svg>
const gruss = document.getElementById('gruss');

// Nur hinzufügen, wenn die Sprache noch fehlt
const addLanguage = (el, lang) => {
  const list = el.systemLanguage;
  for (let i = 0; i < list.numberOfItems; i++) {
    if (list.getItem(i) === lang) return false;
  }
  list.appendItem(lang);
  return true;
};

console.log(addLanguage(gruss, 'de'));
console.log(addLanguage(gruss, 'de'));
console.log(gruss.getAttribute('systemLanguage'));

true false fr, de

Mehrere Einträge anhängen und durchlaufen

const svgNS = 'http://www.w3.org/2000/svg';
const g = document.createElementNS(svgNS, 'g');

['de', 'de-AT', 'de-CH'].forEach((lang) => g.systemLanguage.appendItem(lang));

for (let i = 0; i < g.systemLanguage.numberOfItems; i++) {
  console.log(i, g.systemLanguage.getItem(i));
}

0 de 1 de-AT 2 de-CH

// Wichtig · Fallstricke

Doppelte Einträge: Nach SVG 2 prüft appendItem() nicht, ob ein Wert schon in der Liste steht. Wer keine Duplikate will, muss vorher selbst prüfen (siehe Beispiel 2). In SVG 1.1 wurde ein bereits vorhandenes Element zuerst entfernt. Auf dieses alte Verhalten sollte man sich nicht verlassen.
Schreibgeschützte Listen: Ist die Liste schreibgeschützt, wirft die Methode eine DOMException vom Typ NoModificationAllowedError.
Serialisierung: Die Einträge werden im Attribut je nach Liste mit Komma oder Leerzeichen getrennt, bei systemLanguage z. B. als "en, de". Leerzeichen innerhalb eines Eintrags können dazu führen, dass der Wert beim erneuten Einlesen anders aufgeteilt wird.
Veraltet: requiredFeatures wurde aus SVG 2 entfernt und liefert in modernen Browsern keine SVGStringList mehr. Nutze stattdessen systemLanguage oder requiredExtensions.
Kompatibilität: Die Methode wird in allen aktuellen Browsern (Chrome, Edge, Firefox, Safari) unterstützt. Die Eigenschaft length und die Iteration mit for…of gibt es erst in neueren Versionen. numberOfItems und getItem() funktionieren überall.

Siehe auch

SVGStringList SVGStringList.insertItemBefore() SVGStringList.removeItem() SVGStringList.getItem() SVGStringList.clear() SVGStringList.numberOfItems Scheduling.isInputPending()