JavaScript Element setAttributeNodeNS() Method

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

Definition

Element.setAttributeNodeNS() adds a namespaced Attr node to an element (MDN). Prefer setAttributeNS() for simple namespace + name + value writes, and setAttribute() when no namespace is needed (typical HTML).

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

Syntax

Call el.setAttributeNodeNS. Start with this line.

JavaScript
el.setAttributeNodeNS(attr)
CallWhat it does
el.setAttributeNodeNS(attr)Primary signature.
el.setAttributeNodeNS(...)Call with the arguments your case needs.

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

Library declarations
JavaScript
el.setAttributeNodeNS(attr)

Parameters

ParameterDescription
attributeNodeRequired. Namespaced Attr to add
CloneOptional. Required — Attr cannot be in use on two elements

Return Value

Return ValueDescription
*Replaced Attr, or null if none

JavaScript Examples

Example 1 — Clone a Namespaced Attr

MDN: get with getAttributeNodeNS, clone, then setAttributeNodeNS.

JavaScript
const myns = "http://www.mozilla.org/ns/specialspace";
const d1 = document.getElementById("one");
const d2 = document.getElementById("two");
const a = d1.getAttributeNodeNS(myns, "special-align");

d2.setAttributeNodeNS(a.cloneNode(true));
console.log(d2.getAttributeNS(myns, "special-align")); // "utterleft"
Try It Yourself

How It Works

  1. Namespace URI. Identify the Attr with NS + local name.
  2. getAttributeNodeNS. Returns the Attr from the source.
  3. cloneNode(true). Required before attaching elsewhere (MDN).
  4. setAttributeNodeNS. Adds the copy to the target.

Example 2 — createAttributeNS Then Attach

Build a namespaced Attr from scratch, then set it.

JavaScript
const ns = "http://example.com/ns";
const el = document.getElementById("box");
const attr = document.createAttributeNS(ns, "ex:demo");
attr.value = "ok";

el.setAttributeNodeNS(attr);
console.log(el.getAttributeNS(ns, "demo")); // "ok"
Try It Yourself

How It Works

  1. createAttributeNS. Pass namespace URI + qualified name.
  2. Set value. Assign attr.value before attaching.
  3. Attach. setAttributeNodeNS links it to the element.
  4. Simpler path. setAttributeNS(ns, "ex:demo", "ok") often enough.

Example 3 — Capture the Replaced Attr

MDN: if the same namespaced attribute exists, the old Attr is returned.

JavaScript
const ns = "http://example.com/ns";
const el = document.getElementById("box");
el.setAttributeNS(ns, "ex:demo", "old");

const next = document.createAttributeNS(ns, "ex:demo");
next.value = "new";

const old = el.setAttributeNodeNS(next);
console.log(old && old.value);                 // "old"
console.log(el.getAttributeNS(ns, "demo"));  // "new"
Try It Yourself

How It Works

  1. Existing NS attr. Same namespace + local name.
  2. New Attr. Same identity, new value.
  3. Return. Old Attr comes back from setAttributeNodeNS.
  4. Element. Now holds the new Attr’s value.
Compatibility

Browser Support

Element.setAttributeNodeNS() is Baseline Widely available (MDN, since July 2015). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline Widely available

Element.setAttributeNodeNS()

Add a namespaced Attr node. Prefer setAttributeNS() unless you need the Attr object (clone, inspect, replace).

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
setAttributeNodeNS() Baseline

Bottom line: Fully supported. Use for cloning namespaced Attrs; otherwise setAttributeNS() is clearer.

Frequently Asked Questions

It adds a namespaced Attr node to an element. If an attribute with the same namespace and local name already exists, it is replaced and the old Attr is returned (MDN).
No. MDN marks Element.setAttributeNodeNS() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
The replaced namespaced Attr node, if any (MDN).
MDN: use setAttributeNodeNS() when you need the Attr node first (for example cloning). Prefer setAttributeNS() for simple namespace + name + value writes.
MDN: without cloning you may get NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR (Attribute already in use). Attr must be cloned to be reused on another element.
MDN: for HTML documents when you do not need a specific namespace, use setAttribute() instead of the NS variants.

Next: Element setAttributeNS()

Set a namespaced attribute with namespace, name, and value strings.

setAttributeNS() →

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 setAttributeNode() Method JavaScript Element setAttributeNS() Method