JavaScript NamedNodeMap setNamedItemNS() Method

What You’ll Learn

The setNamedItemNS() method of a NamedNodeMap inserts or replaces an Attr node—including namespaced attributes from XML. Learn the MDN ob:one move example, MDN’s note that it is an alias of setNamedItem(), return values, and InUseAttributeError—with five examples and try-it labs.

Introduction

removeNamedItemNS() detaches a namespaced attribute. setNamedItemNS() attaches an Attr to a new element’s attributes map.

MDN’s example parses XML where ob:one lives in a namespace, removes it with removeNamedItemNS(uri, "one"), then calls setNamedItemNS(one) on an HTML <span>—showing prefix, localName, and qualified name in a loop.

Understanding the setNamedItemNS() Method

An instance method on NamedNodeMap that puts an Attr into the map, replacing any same-name attribute.

• attr — the Attr to insert (often detached via removeNamedItemNS).
• Returns — replaced Attr or null if the name is new.
• Alias — MDN: interchangeable with setNamedItem(attr).
• Exception — thrown if the Attr is still part of another map.
• Namespaced attrs — expose prefix, localName, namespaceURI.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Call the method on a NamedNodeMap (usually from element.attributes):

namedNodeMap.setNamedItemNS(attr)
// MDN: alias of namedNodeMap.setNamedItem(attr)

Parameters

• attr — an Attr node to add or replace in the map.

Return value

The old Attr if replaced, or null when the name is new.

Exceptions

Thrown if the attribute is still part of another map.

Typical pattern (MDN idea)

const doc = new DOMParser().parseFromString(
  '<warning ob:one="test" xmlns:ob="http://www.example.com/ob">Beware!</warning>',
  "application/xml",
);
const warning = doc.querySelector("warning");
const span = document.querySelector("span");

const one = warning.attributes.removeNamedItemNS(
  "http://www.example.com/ob",
  "one",
);
span.attributes.setNamedItemNS(one);

⚖️ setNamedItemNS() vs Related Ideas

Examples Gallery

Examples follow MDN NamedNodeMap.setNamedItemNS. Labs use DOMParser and namespaced XML attributes.

const doc = new DOMParser().parseFromString(
  '<warning ob:one="test" xmlns:ob="http://www.example.com/ob">Beware!</warning>',
  "application/xml",
);
const warning = doc.querySelector("warning");
const span = document.querySelector("span");
const attrMap = span.attributes;

const one = warning.attributes.removeNamedItemNS(
  "http://www.example.com/ob",
  "one",
);
attrMap.setNamedItemNS(one);

console.log(span.attributes.length, one.value);

2 test

const doc = new DOMParser().parseFromString(
  '<warning ob:one="test" xmlns:ob="http://www.example.com/ob"/>',
  "application/xml",
);
const span = document.querySelector("span");
const one = doc.documentElement.attributes.removeNamedItemNS(
  "http://www.example.com/ob",
  "one",
);
span.attributes.setNamedItemNS(one);

const lines = [];
for (const attr of span.attributes) {
  lines.push(`${attr.prefix}|${attr.localName}|${attr.name}`);
}
console.log(lines.join("\n"));

null|one|ob:one

const box = document.querySelector("#demo");
const uri = "https://example.com/app";
const attr = document.createAttributeNS(uri, "app:id");
attr.value = "42";

const replaced = box.attributes.setNamedItemNS(attr);

console.log(replaced === null, box.getAttributeNS(uri, "id"));

true 42

const a = document.querySelector("#box-a");
const b = document.querySelector("#box-b");

const attrA = document.createAttribute("data-x");
attrA.value = "1";
const viaNS = a.attributes.setNamedItemNS(attrA);

const attrB = document.createAttribute("data-y");
attrB.value = "2";
const viaNamed = b.attributes.setNamedItem(attrB);

console.log(viaNS === null, viaNamed === null);

true true

const doc = new DOMParser().parseFromString(
  '<warning ob:one="test" xmlns:ob="http://www.example.com/ob"/>',
  "application/xml",
);
const warning = doc.documentElement;
const target = document.querySelector("#demo");

const stillAttached = warning.attributes.getNamedItemNS(
  "http://www.example.com/ob",
  "one",
);

try {
  target.attributes.setNamedItemNS(stillAttached);
} catch (error) {
  console.log(error.name);
}

InUseAttributeError

🚀 Common Use Cases

• Move namespaced XML attributes between elements (MDN demo).
• Insert Attr nodes from createAttributeNS().
• Teach namespace-aware DOM alongside getNamedItemNS / removeNamedItemNS.
• Interop with legacy code using the NS-named NamedNodeMap API.
• Inspect prefix and localName after insertion.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• MDN: alias of setNamedItem(attr)—interchangeable.
• Detach with removeNamedItemNS before moving namespaced attrs.
• Prefer setAttributeNS() for simple string updates.
• Related learning: setNamedItem(), removeNamedItemNS(), setAttributeNodeNS(), Element.attributes.

💡 Best Practices