- HTML DOM Element setAttribute()
- See Also:
- Tutorial:
- Syntax
- Parameters
- Return Value
- Note
- NO:
- YES:
- More Examples
- Browser Support
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- Element: setAttribute() method
- Syntax
- Parameters
- Return value
- Exceptions
- Examples
- HTML
- JavaScript
- Specifications
- Browser compatibility
- Gecko notes
- Found a content problem with this page?
- JavaScript HTML DOM — Changing HTML
- Changing HTML Content
- Example
- Example
- Changing the Value of an Attribute
- Example
- Dynamic HTML content
- Example
- document.write()
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- How to add the value of the element in HTML?
- HTML tag
- Example
- HTML tag
- Example
- Example
- Using Script
- Example
HTML DOM Element setAttribute()
The setAttribute() method sets a new value to an attribute.
If the attribute does not exist, it is created first.
See Also:
Tutorial:
Syntax
Parameters
Parameter | Description |
name | Required. The name of the attribute. |
value | Required. The new attribute value. |
Return Value
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.
NO:
YES:
More Examples
Change an input field to an input button:
Add a href attribute to an element:
Change the value of the target attribute to «_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 |
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
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
Parameters
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.
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
Exceptions
The specified attribute name contains one or more characters which are not valid in attribute names.
Examples
In the following example, setAttribute() is used to set attributes on a .
HTML
button height: 30px; width: 100px; margin: 1em; >
JavaScript
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
Browser compatibility
BCD tables only load in the browser
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() .
Found a content problem with this page?
This page was last modified on Apr 7, 2023 by MDN contributors.
Your blueprint for a better internet.
JavaScript HTML DOM — Changing HTML
The HTML DOM allows JavaScript to change the content of HTML elements.
Changing HTML Content
The easiest way to modify the content of an HTML element is by using the innerHTML property.
To change the content of an HTML element, use this syntax:
This example changes the content of a
element:
Example
- The HTML document above contains a
element with id=»p1″
- We use the HTML DOM to get the element with id=»p1″
- A JavaScript changes the content ( innerHTML ) of that element to «New text!»
This example changes the content of an element:
Example
- The HTML document above contains an element with id=»id01″
- We use the HTML DOM to get the element with id=»id01″
- A JavaScript changes the content ( innerHTML ) of that element to «New Heading»
Changing the Value of an Attribute
To change the value of an HTML attribute, use this syntax:
This example changes the value of the src attribute of an element:
Example
- The HTML document above contains an element with id=»myImage»
- We use the HTML DOM to get the element with id=»myImage»
- A JavaScript changes the src attribute of that element from «smiley.gif» to «landscape.jpg»
Dynamic HTML content
JavaScript can create dynamic HTML content:
Example
document.write()
In JavaScript, document.write() can be used to write directly to the HTML output stream:
Example
Never use document.write() after the document is loaded. It will overwrite the document.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
How to add the value of the element in HTML?
This article will teach you how to add the value of the element in HTML. We have a basic idea about the value attribute in HTML and the situations where we use the value attribute Let’s look forward to a better understanding of the HTML value attribute.
For various types of input, it has a distinct meaning:
- It specifies the text on the button when it is present in «button,» «reset,» and «submit.»
- It specifies the initial value of the input field when it is present in the «text,» «password,» and «hidden» values.
- When «checkbox,» «radio,» and «picture» are present, it indicates the value connected to the input.
HTML tag
The clickable button in HTML is defined by the tag. The content is sent using the tag. The tag can contain graphics and text information. Different default types for «button» are used by various browsers.
Example
In the following example we are creating two tag for subjects where one acts as HTML subject button and another one acts as JAVA subject button.
HTML tag
The tag designates a field for user-enterable data. The most significant form element is the element. Depending on the type attribute, the element can be presented in a number of different ways.
Example
Considering the following example, where we are using HTML form with tag with default values
When the above script is run, it will produce an output that includes an input field displaying default values for the first name and last name using the value attribute along with a submit button on the webpage.
- and . The list items in
are typically represented by numbers or letters.
Example
Consider the following example we are using the value attribute in the ordered list.
On running the above script, the output window will pop up, displaying the ordered list of different cars used in the script, starting with number 100 as we mentioned value=»100″ on the webpage.
Using Script
In the following example we are running a script to change the value of textfield.
Example
Name:Click To Change Value
function mytutorial1()
When the script gets executed, it will generate an output consisting of an input field with a value =»thor» along with a click button. When the user clicks the button, the event gets triggered and changes the input value=»black widow» on the webpage.