JavaScript Element setAttributeNodeNS() Method

What You’ll Learn

Element.setAttributeNodeNS() is an instance method that adds a namespaced Attr node to an element. Learn MDN’s special-align clone demo, createAttributeNS, the INUSE_ATTRIBUTE_ERR rule, when to prefer setAttributeNS(), and five try-it labs aligned with MDN.

Introduction

SVG and XML documents often use namespaced attributes—for example xlink:href or custom attributes tied to a namespace URI. To attach a namespaced attribute as an Attr object, call element.setAttributeNodeNS(attr).

MDN: if you do not need to work with the Attr node first (such as cloning from another element), use setAttributeNS() instead. For plain HTML attributes without a namespace, use setAttribute().

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

Understanding the setAttributeNodeNS() Method

Calling el.setAttributeNodeNS(attr) attaches a namespaced Attr to el. If a namespaced attribute with the same identity already exists, it is replaced and the old node is returned (MDN).

• It is an instance method on Element.
• Takes one parameter: a namespaced Attr node (MDN).
• Returns the replaced Attr node, if any (MDN).
• Prefer setAttributeNS() for simple namespace + name + value writes (MDN).
• Prefer setAttribute() for non-namespaced HTML attributes (MDN).
• Always clone Attr nodes before attaching to another element (MDN).

📝 Syntax

General form of Element.setAttributeNodeNS (MDN):

setAttributeNodeNS(attributeNode)

Parameters

Return value

Notes

MDN: if the named attribute already exists, it is replaced and the replaced node is returned. Without cloning, reusing an Attr may throw NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR.

Common patterns

const MY_NS = "http://www.mozilla.org/ns/specialspace";
const d1 = document.getElementById("one");
const d2 = document.getElementById("two");

// MDN — clone namespaced Attr
const a = d1.getAttributeNodeNS(MY_NS, "special-align");
d2.setAttributeNodeNS(a.cloneNode(true));

// Create namespaced Attr from scratch
const attr = document.createAttributeNS(MY_NS, "special-align");
attr.value = "utterleft";
el.setAttributeNodeNS(attr);

// Simple write? Prefer setAttributeNS (MDN)
el.setAttributeNS(MY_NS, "special-align", "utterleft");

Examples Gallery

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

const MY_NS = "http://www.mozilla.org/ns/specialspace";
// <div id="one" xmlns:myNS="..." myNS:special-align="utterleft">
// <div id="two">
const d1 = document.getElementById("one");
const d2 = document.getElementById("two");
const a = d1.getAttributeNodeNS(MY_NS, "special-align");

d2.setAttributeNodeNS(a.cloneNode(true));

console.log(d2.getAttributeNS(MY_NS, "special-align")); // "utterleft"

utterleft

const MY_NS = "http://www.mozilla.org/ns/specialspace";
const el = document.getElementById("box");
const attr = document.createAttributeNS(MY_NS, "special:specialAlign");
attr.value = "center";

el.setAttributeNodeNS(attr);

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

center

const MY_NS = "http://www.mozilla.org/ns/specialspace";
const el = document.getElementById("item");
// has special:specialAlign="old"

const next = document.createAttributeNS(MY_NS, "special:specialAlign");
next.value = "new";

const replaced = el.setAttributeNodeNS(next);

console.log(replaced.value);                        // "old"
console.log(el.getAttributeNS(MY_NS, "specialAlign")); // "new"

old
new

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

// Safe — clone first (MDN)
d2.setAttributeNodeNS(a.cloneNode(true));

// Risky — may throw INUSE_ATTRIBUTE_ERR:
// d2.setAttributeNodeNS(a);

utterleft

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

// Preferred for simple cases (MDN)
el.setAttributeNS(MY_NS, "special:specialAlign", "utterleft");

// Attr-node workflow (more steps)
const attr = document.createAttributeNS(MY_NS, "special:specialAlign");
attr.value = "utterleft";
el.setAttributeNodeNS(attr);

console.log(el.getAttributeNS(MY_NS, "specialAlign")); // "utterleft"

utterleft

🚀 Common Use Cases

• Cloning namespaced attributes such as special-align between elements (MDN).
• Building namespaced Attr nodes with document.createAttributeNS().
• Capturing the previous Attr when replacing a namespaced attribute.
• Working with Attr nodes from getAttributeNodeNS().
• SVG/XML workflows where namespace URIs matter.
• Pairing with removeAttributeNS() for full namespaced attribute lifecycle.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• Prefer setAttributeNS() for simple namespace + name + value writes (MDN).
• Prefer setAttribute() for non-namespaced HTML attributes (MDN).
• Always clone Attr nodes before attaching to another element (MDN).
• Without cloning you may get INUSE_ATTRIBUTE_ERR (MDN).
• Related: getAttributeNodeNS(), getAttributeNS(), removeAttributeNS(), JavaScript hub.

💡 Best Practices