JavaScript NamedNodeMap setNamedItemNS() Method

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

Definition

NamedNodeMap.setNamedItemNS(attr) puts an Attr into the map (usually element.attributes). If a same-name attribute already exists, it is replaced. Per MDN, this method is an alias of setNamedItem() — you can use them interchangeably.

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

Syntax

Call map.setNamedItemNS. Start with this line.

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

Built into the browser. Call setNamedItemNS(...) on a NamedNodeMap — no import required.

Library declarations
JavaScript
map.setNamedItemNS(attr)

Parameters

ParameterDescription
attrRequired. Attr node to insert

Return Value

Return ValueDescription
*Old Attr, or null if new

JavaScript Examples

Example 1 — Move a Namespaced Attr

Remove from XML, then set on a span (MDN-style move).

JavaScript
const ns = "http://www.example.com/ob";
const doc = new DOMParser().parseFromString(
  '<warning ob:one="test" xmlns:ob="' + ns + '">Beware!</warning>',
  "application/xml"
);
const span = document.querySelector("#demo");
const one = doc.querySelector("warning")
  .attributes.removeNamedItemNS(ns, "one");
span.attributes.setNamedItemNS(one);
console.log(one.value); // "test"
Try It Yourself

How It Works

  1. Parse XML. The attr lives in a real namespace URI.
  2. Remove it. removeNamedItemNS frees the Attr.
  3. Set on the target. setNamedItemNS(one) attaches it.
  4. Read the value. The same Attr object now belongs to the span.

Example 2 — New Attr Returns null

Insert a fresh namespaced attribute — return value is null.

JavaScript
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);              // true
console.log(box.getAttributeNS(uri, "id"));  // "42"
Try It Yourself

How It Works

  1. Create the Attr. createAttributeNS(uri, "app:id").
  2. Set a value. Assign attr.value before inserting.
  3. Insert. No previous same-name attr → return null.
  4. Confirm. getAttributeNS reads the new value.

Example 3 — Replace Returns the Old Attr

Setting a second Attr with the same name replaces the first.

JavaScript
const box = document.querySelector("#demo");
const uri = "https://example.com/app";
const first = document.createAttributeNS(uri, "app:id");
first.value = "old";
box.attributes.setNamedItemNS(first);

const second = document.createAttributeNS(uri, "app:id");
second.value = "new";
const old = box.attributes.setNamedItemNS(second);
console.log(old.value);                     // "old"
console.log(box.getAttributeNS(uri, "id")); // "new"
Try It Yourself

How It Works

  1. Insert the first Attr. Map now has app:id = "old".
  2. Create a second. Same namespace + local name.
  3. Set again. The old Attr is returned (replaced).
  4. Map updates. The element now holds the new value.

Example 4 — Alias of setNamedItem()

MDN: both methods behave the same for a new attribute.

JavaScript
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
Try It Yourself

How It Works

  1. Use both APIs. setNamedItemNS and setNamedItem.
  2. Same contract. New attr → both return null.
  3. NS in the name. Symmetry with getNamedItemNS / removeNamedItemNS.
  4. Pick one style. Stay consistent in a codebase.

Example 5 — InUseAttributeError

You cannot set an Attr that is still attached elsewhere.

JavaScript
const ns = "http://www.example.com/ob";
const doc = new DOMParser().parseFromString(
  '<warning ob:one="test" xmlns:ob="' + ns + '"/>',
  "application/xml"
);
const stillAttached = doc.documentElement.attributes
  .getNamedItemNS(ns, "one");
try {
  document.querySelector("#demo").attributes.setNamedItemNS(stillAttached);
} catch (error) {
  console.log(error.name); // "InUseAttributeError"
}
Try It Yourself

How It Works

  1. Get without removing. getNamedItemNS keeps ownership.
  2. Try to set elsewhere. The Attr is still on the XML element.
  3. Browser throws. InUseAttributeError (DOMException).
  4. Fix: call removeNamedItemNS first, then set.
Compatibility

Browser Support

NamedNodeMap.setNamedItemNS() is marked Baseline Widely available on MDN (since July 2015). It is a browser DOM API — not a Node.js built-in.

✓ Baseline · Widely available

NamedNodeMap.setNamedItemNS()

Supported across modern Chrome, Firefox, Safari, and Edge for inserting Attr nodes into a NamedNodeMap.

98% Browser support
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
setNamedItemNS() Excellent

Bottom line: Safe for production. Remove an Attr before moving it; for simple string values prefer setAttributeNS().

Frequently Asked Questions

It inserts an Attr node into the map by its name. If a same-name attribute already exists, it is replaced. MDN notes it is an alias of setNamedItem()—you can use them interchangeably.
No. MDN marks NamedNodeMap.setNamedItemNS() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
MDN states they are aliases with the same behavior. The NS name exists for symmetry with other namespace-aware NamedNodeMap methods like getNamedItemNS and removeNamedItemNS.
The old Attr node if an attribute with the same name was replaced, or null if the attribute is new to the map.
InUseAttributeError (DOMException) if the Attr is still part of another map — remove it first with removeNamedItemNS() or removeNamedItem().
When moving or inserting Attr nodes (often namespaced ones from XML/SVG) after removeNamedItemNS(). For everyday HTML strings, setAttribute() or setAttributeNS() is usually simpler.

Next: length

Count attributes on a NamedNodeMap.

length →

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)

9 people found this page helpful

JavaScript NamedNodeMap setNamedItem() Method JavaScript NamedNodeMap length Property