JavaScript Element setAttributeNS() Method

What You’ll Learn

Element.setAttributeNS() is an instance method that sets a namespaced attribute by namespace URI and qualified name. Learn MDN’s spec:align example, SVG xlink:href, when to prefer setAttribute(), XSS injection-sink warnings, and five try-it labs aligned with MDN.

Introduction

Most HTML pages use setAttribute("class", "active") for plain attributes. SVG and XML also need namespaced attributes tied to a namespace URI—for example xlink:href on an SVG link.

element.setAttributeNS(namespaceURI, qualifiedName, value) adds or updates that namespaced attribute (MDN). For HTML attributes without a namespace, use setAttribute() instead.

This page is part of JavaScript Element. Pair with getAttributeNS(), removeAttributeNS(), and setAttributeNodeNS().

Understanding the setAttributeNS() Method

Calling el.setAttributeNS(ns, name, value) sets a namespaced attribute on el. Read it back with getAttributeNS(); delete with removeAttributeNS().

• It is an instance method on Element.
• namespaceURI — the attribute namespace URI (MDN).
• qualifiedName — prefix:localName or localName (MDN).
• value — string or trusted type (MDN).
• Returns undefined.
• For Attr-node workflows, use setAttributeNodeNS() instead (MDN).

📝 Syntax

General form of Element.setAttributeNS (MDN):

setAttributeNS(namespaceURI, 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 MY_NS = "http://www.mozilla.org/ns/specialspace";
const XLINK = "http://www.w3.org/1999/xlink";
const el = document.getElementById("target");

// MDN — custom namespaced attribute
el.setAttributeNS(MY_NS, "spec:align", "center");

// SVG link target
const anchor = document.querySelector("svg a");
anchor.setAttributeNS(XLINK, "xlink:href", "https://example.com");

// Read back
console.log(el.getAttributeNS(MY_NS, "align")); // "center"

// Plain HTML? Use setAttribute instead (MDN)
el.setAttribute("data-id", "42");

Examples Gallery

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

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

d.setAttributeNS(MY_NS, "spec:align", "center");

console.log(d.getAttributeNS(MY_NS, "align")); // "center"

center

const XLINK = "http://www.w3.org/1999/xlink";
const anchor = document.querySelector("svg a");

anchor.setAttributeNS(XLINK, "xlink:href", "https://example.com");

console.log(anchor.getAttributeNS(XLINK, "xlink:href"));
// "https://example.com"

https://example.com

const MY_NS = "http://www.mozilla.org/ns/specialspace";
const el = document.getElementById("item");
// already has spec:align="left"

el.setAttributeNS(MY_NS, "spec:align", "right");

console.log(el.getAttributeNS(MY_NS, "align")); // "right"

right

const box = document.getElementById("box");

// Plain HTML — no namespace (MDN)
box.setAttribute("data-role", "panel");

// Namespaced custom attribute
const MY_NS = "http://www.mozilla.org/ns/specialspace";
box.setAttributeNS(MY_NS, "spec:align", "center");

console.log(box.getAttribute("data-role"));       // "panel"
console.log(box.getAttributeNS(MY_NS, "align")); // "center"

panel
center

const MY_NS = "http://www.mozilla.org/ns/specialspace";
const el = document.getElementById("widget");

// Safe — custom namespaced metadata
el.setAttributeNS(MY_NS, "spec:align", "center");

// Safe — plain data attribute
el.setAttribute("data-version", "1");

// Avoid: el.setAttribute("onclick", userInput);   // XSS sink
// Avoid: el.setAttributeNS(ns, "on:click", x); // still dangerous

console.log(el.getAttributeNS(MY_NS, "align")); // "center"

center

🚀 Common Use Cases

• Setting xlink:href or other SVG namespaced attributes dynamically.
• Writing custom XML namespace attributes in mixed SVG/HTML documents.
• Updating namespaced metadata on elements parsed from XML.
• Pairing with getAttributeNS() and removeAttributeNS() for full lifecycle.
• Simple namespaced writes when you do not need an Attr node (vs setAttributeNodeNS()).
• Leaving plain HTML attributes to setAttribute() (MDN).

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• MDN: for HTML attributes without a namespace, use setAttribute() instead.
• Some attributes are XSS injection sinks — never pass untrusted input to onclick, srcdoc, etc. (MDN).
• For Attr-node workflows (clone, replace), use setAttributeNodeNS() (MDN).
• Do not use setAttributeNS(ns, name, null) to delete — use removeAttributeNS().
• Related: getAttributeNS(), hasAttributeNS(), removeAttributeNS(), JavaScript hub.

💡 Best Practices