JavaScript/DOM/Element/setAttributeNode
Die Methode Element.setAttributeNode fügt einen neuen Attributknoten in ein Element ein. Ist der Attributknoten bereits vorhanden, wird der alte Knoten durch den neuen ersetzt. Ist er noch nicht vorhanden, wird er neu angelegt. Heute gelten Attribute nicht mehr als Attributsknoten, und so wird folgerichtig im allgemeinen die setAttribute()-Methode verwendet.
Syntax
var attrName = element.setAttributeNode(name);
-
name
: Name des Attributs, das gesetzt werden soll ( als Zeichenkette) -
attrName
: der ersetzte Attributknoten, falls es vorher schon einen gab.
Anwendungsbeispiel
function erzeugeHinweis() {
var div = document.getElementsByTagName('div')[0];
var att = document.createAttribute('class');
att.value = 'hinweis';
div.setAttributeNode(att);
}
Das Beispiel enthält ein div
ohne weitere Attribute.
Bei einem klick auf den Button wird in der Funktion erzeugeHinweis
dieses Div-Element geholt und anschließend mit document.createAttribute("class")
ein neues Attribut mit Namen class
erzeugt. Das Attribut hat damit aber noch keine Wirkung – es hängt weder im Elementenbaum des Dokuments, noch hat es einen Wert. Das Attribut ist lediglich als Objekt erzeugt.
Die Methode createAttribute()
gibt das erzeugte Objekt, also in dem Fall das class-Attribut, zurück. Der Rückgabewert wird in der Variablen att
gespeichert. Über diese Variable ist das neu erzeugte Attribut von da ab ansprechbar.
Damit das Attribut einen Inhalt, bzw. value
erhält, wird der dem Attributknoten über die Objekteigenschaft setAttributeNode() der gewünschte Wert hinweis
zugewiesen.
Sobald dies passiert ist, wird das div mit den im CSS festgelegten Angaben angezeigt.