Arguments

attr (Attr) required

The attribute node to add.

Description

Add an Attr node to this Element.

If an attribute already exists with the specified nodeName, the existing node is replaced with the new one.

This method is for working with non-namespaced attribute nodes; to add a namespaced attribute node, use the DOM 2 setAttributeNodeNS method instead.

Return value

If the new attribute replaces an existing attribute, the previously existing attribute node is returned; otherwise null is returned.

Compatibility

In Internet Explorer 5.5 in HTML this method is not implemented (it returns undefined).

Opera 9.0 in pure XML (but not XHTML mode¹) parses entities when setting the value or nodeValue of an attribute node.

In Safari 1.3 and 2 it's not possible to set the value of a created attribute using the value property (the property is readonly; however using the nodeValue property is supported fine).

In Internet Explorer 6 and 7 in HTML when overwriting an existing attribute node, the object that's returned is not the old attribute node, it's an object of type unknown².

Additionally, IE in HTML cannot set the type attribute node of an <input> element — attempting to do so will throw an error (This command is not supported). It also cannot set the style attribute node — doing so also throws an error (Member not found). And it cannot set event-handling attribute nodes with string values (to do so has no effect, unless that element already has an event-handling attribute of the same name, in which the case the operation to set a new one will remove the old one, leaving nothing — although the nodeValue of the onclick attribute node will subsequently return the string value that was set, there won't actually be an active event handler on the element). IE can, however, set event-handling attribute nodes if a function is set as the value, rather than a string:

var attr = document.createAttribute('onclick');
attr.nodeValue = function() { alert("this works!"); };
element.setAttributeNode(attr);

However subsequently retrieving the nodeValue of the onclick attribute node will return null, not a function object.

In all browsers an attribute node whose value evaluates to a boolean (such as disabled) can only be set to true — setting it to false has no effect. This is correct behavior, and is because such attributes should only have one possible value (eg. disabled="disabled"), or are not defined (so negating them should be done with removeAttributeNode). In Opera 9.5, Firefox and Safari the attribute value will subsequently return as false but the element will still be disabled, in Opera 9.0 the value will continue to return as disabled, and in Internet Explorer the value will continue to return as boolean true; these are accurate reflections of the state of the element, even if they are a little confusing! However since IE considers these attributes to have an actual boolean value, the value can be toggled (and the element disabled and enabled accordingly) by setting it as a boolean rather than a string:

var attr = document.createAttribute('disabled');
attr.nodeValue = false;
element.setAttributeNode(attr);