JavaScript Element setAttribute() Method

What You’ll Learn

Element.setAttribute() is an instance method that sets or updates an HTML attribute by name. Learn the MDN name and disabled examples, boolean attributes, data-* and aria-* patterns, XSS injection-sink warnings, and five try-it labs aligned with MDN.

Introduction

HTML elements carry attributes—id, class, href, disabled, data-action, and many more. To add or change an attribute from JavaScript, call element.setAttribute(qualifiedName, value). MDN: if the attribute already exists, the value is updated; otherwise a new attribute is added.

On HTML elements in an HTML document, the attribute name is automatically lower-cased when you call setAttribute() (MDN). Non-string values are converted to strings.

This page is part of JavaScript Element. Pair with getAttribute(), hasAttribute(), and removeAttribute().

Understanding the setAttribute() Method

Calling el.setAttribute(name, value) updates the element’s attribute list. To read the result, use getAttribute(); to delete, use removeAttribute().

• It is an instance method on Element.
• Takes qualifiedName (string) and value (string or trusted type) (MDN).
• Returns undefined.
• Boolean attributes: presence means true; set "" or the attribute name (MDN).
• For an Attr node first, use setAttributeNode() instead.
• May throw InvalidCharacterError for invalid attribute names (MDN).

📝 Syntax

General form of Element.setAttribute (MDN):

setAttribute(qualifiedName, value)

Parameters

Return value

Exceptions

• InvalidCharacterError — invalid characters in qualifiedName (MDN).
• TypeError — when Trusted Types are enforced and a raw string is passed to a sink attribute (MDN).

Common patterns

const btn = document.querySelector("#hello_button");

// MDN — set a safe attribute
btn.setAttribute("name", "helloButton");

// Boolean attribute (MDN)
btn.setAttribute("disabled", "disabled");
// or btn.setAttribute("disabled", "");

// data-* and aria-*
btn.setAttribute("data-action", "save");
btn.setAttribute("aria-label", "Save document");

// Update existing value
btn.setAttribute("class", "primary large");

Examples Gallery

Examples follow MDN Element.setAttribute() patterns. Use View Output or Try It Yourself for each case.

const helloButton = document.querySelector("#hello_button");

helloButton.setAttribute("name", "helloButton");
helloButton.innerText = helloButton.getAttribute("name");

console.log(helloButton.getAttribute("name")); // "helloButton"

helloButton

const helloButton = document.querySelector("#hello_button");

if (helloButton.disabled) {
  helloButton.removeAttribute("disabled");
} else {
  helloButton.setAttribute("disabled", "disabled");
}

console.log(helloButton.disabled); // true or false

true

const btn = document.querySelector("#save");

btn.setAttribute("data-action", "save");
btn.setAttribute("data-id", "42");

console.log(btn.getAttribute("data-action")); // "save"
console.log(btn.dataset.id);                  // "42"

save
42

const card = document.getElementById("card");
// <div id="card" class="muted">

card.setAttribute("class", "highlight active");

console.log(card.getAttribute("class")); // "highlight active"

highlight active

const iconBtn = document.querySelector("#icon-btn");

iconBtn.setAttribute("aria-label", "Close dialog");
iconBtn.setAttribute("role", "button");

console.log(iconBtn.getAttribute("aria-label")); // "Close dialog"

// Avoid: iconBtn.setAttribute("onclick", userInput); // XSS sink

Close dialog

🚀 Common Use Cases

• Setting id, class, href, or src on dynamic elements.
• Toggling boolean attributes like disabled, hidden, or checked (MDN).
• Attaching data-* metadata for JavaScript or CSS selectors.
• Adding aria-* labels and roles for accessibility.
• Updating validation state (aria-invalid, aria-expanded).
• Pairing with getAttribute() and removeAttribute() for full attribute lifecycle.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• Some attributes are XSS injection sinks — never pass untrusted input to onclick, srcdoc, etc. (MDN).
• Boolean attributes: presence means true; use removeAttribute() to clear (MDN).
• Do not use setAttribute(name, null) to delete — use removeAttribute() (MDN).
• For namespaced attributes, use setAttributeNS() (MDN).
• Related: getAttribute(), hasAttribute(), removeAttribute(), JavaScript hub.

💡 Best Practices