setAttributeNode (W3C DOM Core method)

Version Depr. Static
DOM1 No No
Browser support (more…)
IE6+ FF1.5+ SA3+ OP9.5+
Buggy Full Full Full


var attr = document.createAttribute('rel');
attr.nodeValue = 'me';


The example above creates a rel attribute node, assigns it the nodeValue me, then adds it to an element.

So if the element in question were this HTML:

<a href="">brothercake</a>

Then the operation above would result in this:

<a href="" rel="me">brothercake</a>


attr (Attr) required

The attribute node to add.


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.


Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.5 2.0 3.0 1.3 2.0 3.0 9.0 9.5
Partial Buggy Buggy Full Full Full Buggy Buggy Full Buggy Full

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

Opera 9.0 in pure XML (but not XHTML mode1) 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 unknown2.

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!"); };

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;


1 On XHTML pages served as application/xhtml+xml.

2 Some of Internet Explorer's DOM implementation comes from MS COM rather than native JScript, and objects on the other side of a COM bridge return type unknown.

User-contributed notes

There are no comments yet.

Related Products