Element: setAttribute() method
==============================

 Sets the value of an attribute on the specified element. If
 the attribute already exists, the value is updated; otherwise a new attribute is added
 with the specified name and value.

To get the current value of an attribute, use `getAttribute()`; to remove an attribute, call `removeAttribute()`.

Syntax
------


```js
setAttribute(name, value)
```

### Parameters

`name`

 A string specifying the name of the attribute whose value is to be
 set. The attribute name is automatically converted to all lower-case when
 `setAttribute()` is called on an HTML element in an HTML document.


`value`

 A string containing the value to assign to the attribute. Any
 non-string value specified is converted automatically into a string.



 Boolean attributes are considered to be `true` if they're present on the
 element at all. You should set `value` to the empty string (`""`)
 or the attribute's name, with no leading or trailing whitespace. See the example below for a practical demonstration.

 Since the specified `value` gets converted into a string, specifying
 `null` doesn't necessarily do what you expect. Instead of removing the
 attribute or setting its value to be `null`, it instead sets the attribute's
 value to the string `"null"`. If you wish to remove an attribute, call
 `removeAttribute()`.

### Return value

None (`undefined`).

### Exceptions

`InvalidCharacterError` `DOMException`

Thrown if the `name` value is not a valid XML name; for example, it starts with a number, a hyphen, or a period, or contains characters other than alphanumeric characters, underscores, hyphens, or periods.

Examples
--------

 In the following example, `setAttribute()` is used to set attributes on a
 `<button>`.

### HTML


```html
<button>Hello World</button>
```


```
button {
  height: 30px;
  width: 100px;
  margin: 1em;
}
```

### JavaScript


```js
const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");
```


This demonstrates two things:

* The first call to `setAttribute()` above shows changing the `name` attribute's value to "helloButton".
 You can see this using your browser's page inspector (Chrome, Edge,
 Firefox, Safari).
* To set the value of a Boolean attribute, such as `disabled`, you can specify any value.
 An empty string or the name of the attribute are recommended values.
 All that matters is that if the attribute is present at all, *regardless of its actual value*, its value is considered to be `true`.
 The absence of the attribute means its value is `false`. By setting the value of the `disabled` attribute to the empty string (`""`), we are setting `disabled` to `true`, which results in the button being disabled.

DOM methods dealing with element's attributes:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-setattribute① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Gecko notes

 Using `setAttribute()` to modify certain attributes, most notably
 `value` in XUL, works inconsistently, as the attribute specifies the default
 value. To access or modify the current values, you should use the properties. For
 example, use `Element.value` instead of `Element.setAttribute()`.