Element.setAttribute() sets the value of an attribute on the element (MDN). If the attribute already exists, the value is updated; otherwise a new attribute is added. Read with getAttribute(); remove with removeAttribute().
Pass the required arguments shown below. Check return values and browser support before you rely on the result.
Call el.setAttribute. Start with this line.
el.setAttribute(name, value)| Call | What it does |
|---|---|
el.setAttribute(name, value) | Primary signature. |
el.setAttribute(...) | Call with the arguments your case needs. |
Built into the browser. Call setAttribute(...) on an Element — no import required.
el.setAttribute(name, value)| Parameter | Description |
|---|---|
| qualifiedName | Required. Attribute name (prefix:localName or localName) |
| value | Required. String (or Trusted Type when enforced) |
| Return Value | Description |
|---|---|
| * | Always undefined |
MDN: set name, then read it back with getAttribute().
const btn = document.getElementById("hello_button");
btn.setAttribute("name", "helloButton");
console.log(btn.getAttribute("name")); // "helloButton"getAttribute("name") returns the string.name is not an XSS sink (MDN).disabledMDN: presence means true; remove the attribute to enable again.
const btn = document.getElementById("hello_button");
if (btn.hasAttribute("disabled")) {
btn.removeAttribute("disabled");
} else {
btn.setAttribute("disabled", "disabled");
}
console.log("disabled?", btn.hasAttribute("disabled"));"" or "disabled".removeAttribute() clears a boolean attr.hasAttribute() over reading the value.toggleAttribute("disabled") does the same flip.data-*Custom data attributes work the same way with setAttribute().
const card = document.getElementById("card");
card.setAttribute("data-id", "42");
card.setAttribute("data-role", "admin");
console.log(card.getAttribute("data-id")); // "42"
console.log(card.dataset.id); // "42""data-id" with setAttribute.dataset.id (camelCase).Element.setAttribute() is Baseline Widely available (MDN, since July 2015). It is not Deprecated, Experimental, or Non-standard. Trusted Types enforcement for unsafe attributes depends on CSP / browser support.
Set or update any attribute by name. Prefer safe attributes; never feed untrusted strings into XSS sinks.
Bottom line: Safe and universal for ordinary attributes. Treat event handlers, srcdoc, and script URLs as security-sensitive.
Attach an Attr node when you already have the attribute object.
11 people found this page helpful