HTML DOM Element setAttribute()
Example
Add a class attribute to an element:
element.setAttribute("class", "democlass");
Before:
The Element Object
After:
The Element Object
More examples below.
Description
The setAttribute() method sets a new value to an attribute.
If the attribute does not exist, it is created first.
Syntax
element.setAttribute(name, value)
Parameters
Parameter
Description
name
Required.
The name of the attribute.
The name of the attribute.
value
Required.
The new attribute value.
The new attribute value.
Return Value
NONE
Note
It is possible to add a style attribute with a value to an element, but it is not recommended because it can overwrite other properties in the style attribute.
Use Properties of the Style Object instead:
NO:
element.setAttribute("style", "background-color:red;");
YES:
element.style.backgroundColor = "red";
More Examples
Change an input field to an input button:
myInput.setAttribute("type", "button");
Before:
After:
Add a href attribute to an <a> element:
myAnchor.setAttribute("href", "https://www.w3schools.com");
Before:
Go to w3schools.com
After:
Try it Yourself »Change the value of the target attribute to "_self":
if (element.hasAttribute("target")) {
element.setAttribute("target", "_self");
}
Try it Yourself »
element.setAttribute("target", "_self");
}
Browser Support
element.setAttribute() is a DOM Level 1 (1998) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |