Document.createAttribute() — Methode · JavaScript-Referenz

Signatur

Document.prototype.createAttribute(localName)

Beschreibung

document.createAttribute() erzeugt ein neues Attr-Objekt mit dem angegebenen Namen und leerem Wert. Der Knoten gehört zunächst zu keinem Element (ownerElement ist null). Man legt ihn über die Eigenschaft value fest und fügt ihn dann mit Element.setAttributeNode() einem Element hinzu.

In HTML-Dokumenten wird der übergebene Name automatisch in Kleinbuchstaben umgewandelt. Das erzeugte Attribut hat keinen Namensraum; für Attribute mit Namensraum (z. B. xlink:href in SVG) ist createAttributeNS() gedacht.

In der Praxis ist die Methode selten nötig: Element.setAttribute(name, value) erledigt dasselbe in einem Schritt und ist lesbarer. Sinnvoll ist createAttribute() vor allem, wenn man mit Attributknoten als eigenständigen Objekten arbeiten möchte – etwa um denselben vorbereiteten Knoten zu prüfen, zu klonen oder in generischem DOM-Code, der mit NamedNodeMap operiert.

Parameter

Name	Typ	Default	Beschreibung
$localName Pflicht	string		Name des zu erzeugenden Attributs. In HTML-Dokumenten wird er in Kleinbuchstaben umgewandelt. Muss ein gültiger XML-Name sein, sonst wird ein `InvalidCharacterError` geworfen.

Rückgabewert

Typ

Attr

Beschreibung

Ein neuer Attr-Knoten mit dem angegebenen Namen, leerem value ("") und ownerElement === null.

Beispiele

Attribut erzeugen und an ein Element hängen

const button = document.createElement('button');
button.textContent = 'Absenden';

// Attributknoten erzeugen und Wert setzen
const typeAttr = document.createAttribute('type');
typeAttr.value = 'submit';

button.setAttributeNode(typeAttr);

console.log(button.outerHTML);
console.log(typeAttr.ownerElement === button);

<button type="submit">Absenden</button> true

Kleinschreibung in HTML-Dokumenten

const attr = document.createAttribute('Data-UserID');
attr.value = '42';

console.log(attr.name);          // in HTML kleingeschrieben
console.log(attr.ownerElement);  // noch keinem Element zugeordnet

data-userid null

Ungültigen Namen abfangen

const safeCreateAttribute = (name, value) => {
  try {
    const attr = document.createAttribute(name);
    attr.value = value;
    return attr;
  } catch (err) {
    console.warn(`Ungültiger Attributname "${name}": ${err.name}`);
    return null;
  }
};

const el = document.createElement('div');
const ok = safeCreateAttribute('aria-label', 'Hauptmenü');
if (ok) el.setAttributeNode(ok);

safeCreateAttribute('1 falsch', 'x');
console.log(el.getAttribute('aria-label'));

Ungültiger Attributname "1 falsch": InvalidCharacterError Hauptmenü

Vergleich mit setAttribute()

const link = document.createElement('a');

// Umständlich über einen Attributknoten
const href = document.createAttribute('href');
href.value = 'https://programmierung.net';
link.setAttributeNode(href);

// Gleichwertig und kürzer
link.setAttribute('target', '_blank');

console.log(link.outerHTML);

// Wichtig · Fallstricke

Meist überflüssig: element.setAttribute() ist kürzer und in fast allen Fällen vorzuziehen.
Ein Knoten, ein Element: Einen Attr-Knoten, der schon an einem Element hängt, kann man nicht einem zweiten Element zuweisen. Das löst einen InUseAttributeError aus. Vorher mit cloneNode() kopieren oder mit removeAttributeNode() entfernen.
Namensräume: Das Attribut hat keinen Namensraum. Für SVG/XML-Attribute wie xlink:href nimmt man createAttributeNS().
Groß-/Kleinschreibung: In HTML-Dokumenten wird der Name kleingeschrieben, in XML-Dokumenten bleibt er unverändert.
Sicherheit: Setzt man Ereignis-Attribute (onclick usw.) oder href mit javascript:-URLs aus Benutzereingaben, entsteht eine XSS-Lücke, genau wie bei setAttribute(). Werte vorher prüfen und Ereignis-Attribute gar nicht aus fremden Daten erzeugen.
Kompatibilität: Wird von allen Browsern unterstützt. Attr erbt seit DOM4 nicht mehr die Kind-Knoten-Eigenschaften (z. B. childNodes) von früher.

Siehe auch

Attr Document.createAttributeNS() Document.createRange() Document.createTextNode() Document.createTouch()