JavaScript Document createAttributeNS() Method

What You’ll Learn

document.createAttributeNS() is an instance method that creates a namespaced Attr node (see MDN Document: createAttributeNS()). Learn namespaceURI, qualifiedName, MDN’s xml:lang and SVG viewBox examples, how it compares to createAttribute() and setAttributeNS(), and five try-it labs.

Introduction

createAttribute() builds attribute nodes for the default (null) namespace. When an attribute name includes a prefix tied to a namespace — like xml:lang or xlink:href — you need the namespaced version: createAttributeNS(namespaceURI, qualifiedName).

MDN: the method returns an Attr node. Set attr.value, then attach it with setAttributeNode() or setAttributeNodeNS().

Related tutorials: createAttribute(), setAttributeNS(), setAttributeNodeNS().

Understanding document.createAttributeNS()

An instance method on the page’s document object. Part of the DOM Core API (MDN).

• namespaceURI — namespace string, or "" for null namespace (MDN).
• qualifiedName — prefix:localName or localName (MDN).
• Return value — a new Attr node (MDN).
• Attach — setAttributeNode / setAttributeNodeNS.
• Validation — invalid URI or name parts throw (MDN).
• DOM freedom — does not enforce valid element/attribute pairing (MDN).

📝 Syntax

General form of Document.createAttributeNS (MDN):

createAttributeNS(namespaceURI, qualifiedName)

Parameters

• namespaceURI — namespace to associate with the attribute, or empty string (MDN).
• qualifiedName — qualified name string; initializes name on the Attr (MDN).

Return value

A new Attr node (MDN).

MDN: xml:lang example

const el = document.getElementById("greeting");
const attr = document.createAttributeNS(
  "http://www.w3.org/XML/1998/namespace",
  "xml:lang"
);
attr.value = "fr";
el.setAttributeNode(attr);

MDN: unprefixed attribute (null namespace)

const svg = document.getElementById("svg");
const attr = document.createAttributeNS("", "viewBox");
attr.value = "0 0 100 100";
svg.setAttributeNode(attr);
console.log(svg.getAttribute("viewBox")); // "0 0 100 100"

⚖️ createAttributeNS vs related APIs

Examples Gallery

Examples follow MDN Document: createAttributeNS() and show namespaced attribute patterns.

const el = document.getElementById("greeting");
const attr = document.createAttributeNS(
  "http://www.w3.org/XML/1998/namespace",
  "xml:lang"
);
attr.value = "fr";
el.setAttributeNode(attr);

console.log(el.getAttribute("xml:lang")); // "fr"

fr

const svg = document.getElementById("svg");
const attr = document.createAttributeNS("", "viewBox");
attr.value = "0 0 100 100";
svg.setAttributeNode(attr);

console.log(svg.getAttribute("viewBox")); // "0 0 100 100"

0 0 100 100

const attr = document.createAttributeNS(
  "http://www.w3.org/XML/1998/namespace",
  "xml:lang"
);

console.log({
  name: attr.name,
  namespaceURI: attr.namespaceURI,
  prefix: attr.prefix,
  localName: attr.localName
});

{ name: "xml:lang", namespaceURI: "http://www.w3.org/XML/1998/namespace", prefix: "xml", localName: "lang" }

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

// Attr node path
// const attr = document.createAttributeNS("", "viewBox");
// attr.value = "0 0 100 100";
// svg.setAttributeNode(attr);

// One-liner (MDN recommendation for unprefixed):
svg.setAttribute("viewBox", "0 0 100 100");

// Namespaced one-liner:
svg.setAttributeNS(
  "http://www.w3.org/1999/xlink",
  "xlink:href",
  "#icon"
);

(viewBox and xlink:href set via setAttribute / setAttributeNS)

const p = document.createElement("p");
p.textContent = "Hello";

// Null namespace — createAttribute is enough
const title = document.createAttribute("title");
title.value = "Hint";
p.setAttributeNode(title);

// Namespaced — need createAttributeNS
const lang = document.createAttributeNS(
  "http://www.w3.org/XML/1998/namespace",
  "xml:lang"
);
lang.value = "en";
p.setAttributeNode(lang);

console.log({
  title: p.getAttribute("title"),
  lang: p.getAttribute("xml:lang")
});

{ title: "Hint", lang: "en" }

🚀 Common Use Cases

• XML / SVG tooling — build namespaced attributes programmatically.
• xml:lang / xml:space — XML namespace metadata on elements (MDN).
• XLink attributes — xlink:href on SVG or mixed documents.
• Attr node pipelines — clone or move namespaced attrs with node APIs.
• Teaching namespaces — show URI + qualifiedName on DOM nodes.
• Everyday HTML — prefer setAttribute / setAttributeNS.

📝 Notes

• MDN: Baseline Widely available since July 2015.
• Use "" for null namespace unprefixed attributes (MDN).
• Invalid namespace URI or name parts throw (MDN).
• If prefix is xml or xmlns, URI must match MDN rules.
• DOM does not validate element/attribute pairing (MDN).
• Related: createAttribute(), setAttributeNS(), setAttributeNodeNS().

💡 Best Practices