JavaScript Element setAttributeNS() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word SETATTRIBUTENS

Definition

Element.setAttributeNS() adds a new attribute or changes the value of an attribute with the given namespace and qualified name (MDN). For normal HTML without a namespace, prefer setAttribute().

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.setAttributeNS. Start with this line.

JavaScript
el.setAttributeNS(ns, qName, value)
CallWhat it does
el.setAttributeNS(ns, qName, value)Primary signature.
el.setAttributeNS(...)Call with the arguments your case needs.

Built into the browser. Call setAttributeNS(...) on an Element — no import required.

Library declarations
JavaScript
el.setAttributeNS(ns, qName, value)

Parameters

ParameterDescription
namespaceURIRequired. Namespace string (or "")
qualifiedNameRequired. prefix:localName or localName
valueRequired. String or Trusted Type

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Set a Namespaced Attribute

MDN: setAttributeNS(ns, "spec:align", "center").

JavaScript
const d = document.getElementById("d1");
const ns = "http://www.mozilla.org/ns/specialspace";

d.setAttributeNS(ns, "spec:align", "center");
console.log("set");
Try It Yourself

How It Works

  1. Three args. Namespace URI, qualified name, value.
  2. Prefix. spec: is optional but must match a real NS if used.
  3. Create or update. Same as setAttribute, but scoped by NS.
  4. Return. undefined — check with getAttributeNS.

Example 2 — Read with getAttributeNS

After setting, read using the namespace URI and local name.

JavaScript
const d = document.getElementById("d1");
const ns = "http://www.mozilla.org/ns/specialspace";

d.setAttributeNS(ns, "spec:align", "center");
console.log(d.getAttributeNS(ns, "align")); // "center"
Try It Yourself

How It Works

  1. Set with qualified name spec:align.
  2. Get with local name align + the same NS URI.
  3. Wrong URI → null, even if a similar name exists.
  4. hasAttributeNS checks presence the same way.

Example 3 — Prefer setAttribute for HTML

MDN: when no namespace is needed, use the simpler non-NS API.

JavaScript
const btn = document.getElementById("btn");

// Everyday HTML — no namespace
btn.setAttribute("aria-label", "Save");

// Only when you truly need a namespace
btn.setAttributeNS(
  "http://example.com/ns",
  "ex:demo",
  "1"
);

console.log(btn.getAttribute("aria-label"));
Try It Yourself

How It Works

  1. HTML attrs. setAttribute is enough for most pages.
  2. NS attrs. SVG/XML cases need setAttributeNS.
  3. Don’t mix up. Reading NS attrs needs getAttributeNS.
  4. Security. Still avoid XSS-sink attributes from untrusted input.
Compatibility

Browser Support

Element.setAttributeNS() 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.

✓ Baseline Widely available

Element.setAttributeNS()

Set or update a namespaced attribute by URI and qualified name. Prefer setAttribute() for ordinary HTML.

Baseline Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
setAttributeNS() Baseline

Bottom line: Fully supported. Use for real namespaces (SVG/XML); keep setAttribute() as the default for HTML.

Frequently Asked Questions

It adds a new attribute or changes the value of an attribute with the given namespace URI and qualified name (MDN).
No. MDN marks Element.setAttributeNS() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
undefined. There is no return value (MDN).
namespaceURI (string or ""), qualifiedName (e.g. "spec:align"), and value (string or trusted type) (MDN).
MDN: for HTML documents when you do not need a specific namespace, use setAttribute() instead.
Some attributes are XSS injection sinks (onclick, srcdoc, script URLs). Never pass untrusted strings to those — same security considerations as setAttribute() (MDN).

Next: Element setCapture()

Continue with the next Element method in the series.

setCapture() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element setAttributeNodeNS() Method JavaScript Element setCapture() Method