Element.setAttributeNode() — Methode · JavaScript-Referenz

Signatur

Element.prototype.setAttributeNode(attr)

Beschreibung

Die Methode setAttributeNode() hängt einen vollständigen Attr-Knoten an ein Element an. Existiert bereits ein Attribut mit demselben (qualifizierten) Namen, wird es durch den neuen Knoten ersetzt. Das ersetzte Attribut wird zurückgegeben, sodass man es weiterverwenden oder wiederherstellen kann.

Im Alltag reicht meist element.setAttribute(name, value). setAttributeNode() ist sinnvoll, wenn man bereits mit Attr-Objekten arbeitet – etwa beim Klonen oder Verschieben von Attributen zwischen Elementen, beim Wiederherstellen eines zuvor entfernten Attributs oder wenn ein Attribut mit document.createAttribute() vorbereitet wurde.

Wichtig: Ein Attr-Knoten kann immer nur zu einem Element gehören (attr.ownerElement). Ist er bereits einem anderen Element zugeordnet, wirft der Aufruf eine InUseAttributeError-DOMException. In diesem Fall muss der Knoten zuerst entfernt oder mit cloneNode() kopiert werden.

Für Attribute mit Namensraum (z. B. in SVG oder XML) existiert zusätzlich setAttributeNodeNS(); beide Methoden verhalten sich in modernen Browsern praktisch identisch, da der Namensraum im Attr-Knoten selbst gespeichert ist.

Parameter

Name	Typ	Default	Beschreibung
$attr Pflicht	Attr		Der hinzuzufügende Attributknoten, z. B. erzeugt mit `document.createAttribute()` oder erhalten über `getAttributeNode()`/`removeAttributeNode()`.

Rückgabewert

Typ

Attr | null

Beschreibung

Den ersetzten Attr-Knoten, falls bereits ein Attribut gleichen Namens existierte; sonst null. Wird derselbe Knoten erneut gesetzt, wird er selbst zurückgegeben.

Beispiele

Attribut per createAttribute anlegen und setzen

const button = document.createElement('button');
const attr = document.createAttribute('aria-label');
attr.value = 'Menü öffnen';

const replaced = button.setAttributeNode(attr);
console.log(replaced);
console.log(button.outerHTML);

null <button aria-label="Menü öffnen"></button>

Vorhandenes Attribut ersetzen und altes zurückerhalten

const input = document.createElement('input');
input.setAttribute('placeholder', 'Name');

const neu = document.createAttribute('placeholder');
neu.value = 'Vor- und Nachname';

const alt = input.setAttributeNode(neu);
console.log(alt.value);
console.log(input.getAttribute('placeholder'));

Name Vor- und Nachname

Attribute von einem Element auf ein anderes kopieren

const quelle = document.createElement('div');
quelle.setAttribute('data-id', '42');
quelle.setAttribute('class', 'karte aktiv');

const ziel = document.createElement('section');

for (const attr of quelle.attributes) {
  // cloneNode nötig, sonst InUseAttributeError
  ziel.setAttributeNode(attr.cloneNode());
}

console.log(ziel.outerHTML);

InUseAttributeError abfangen

const a = document.createElement('span');
const b = document.createElement('span');
a.setAttribute('title', 'Hinweis');

try {
  b.setAttributeNode(a.getAttributeNode('title'));
} catch (err) {
  console.log(err.name);
}

InUseAttributeError

// Wichtig · Fallstricke

InUseAttributeError: Ein Attr, der schon zu einem anderen Element gehört, kann nicht direkt übertragen werden – vorher cloneNode() verwenden oder das Attribut mit removeAttributeNode() lösen.
Bei HTML-Dokumenten wandelt document.createAttribute() den Namen in Kleinbuchstaben um; bei XML/SVG bleibt die Schreibweise erhalten.
Für einfache Fälle ist setAttribute() kürzer und besser lesbar; setAttributeNode() bietet nur dann Vorteile, wenn man mit Attr-Objekten arbeitet.
Sicherheit: Wie bei setAttribute() sollten Werte aus Nutzereingaben nicht ungeprüft in Ereignis-Attribute (onclick …) oder href/src (javascript:-URLs) gesetzt werden – XSS-Gefahr.
Kompatibilität: Von allen Browsern seit jeher unterstützt; ein Mutation-Observer registriert die Änderung als attributes-Mutation.

Siehe auch

Element.setAttribute() Element.getAttributeNode() Element.removeAttributeNode() Element.setAttributeNodeNS() Document.createAttribute() Attr Sanitizer.setDataAttributes()