JavaScript Document createElementNS() Method

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

Definition

document.createElementNS(namespaceURI, qualifiedName) creates a new Element with an explicit namespace. Use it for SVG, MathML, or other mixed-namespace documents where createElement() is not enough.

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

Syntax

Call document.createElementNS. Start with this line.

JavaScript
document.createElementNS(ns, name)
CallWhat it does
document.createElementNS(ns, name)Primary signature.
document.createElementNS(...)Call with the arguments your case needs.

Built into the browser. Call createElementNS(...) on document — no import required.

Library declarations
JavaScript
document.createElementNS(ns, name)

Parameters

ParameterDescription
namespaceURIRequired. Namespace string (or null in some cases)
qualifiedNameRequired. Tag name, optionally prefix:localName
optionsOptional. Custom element is / registry (advanced)

Return Value

Return ValueDescription
*The value returned by document.createElementNS().

JavaScript Examples

Example 1 — Create an SVG Circle

Build a small SVG root and a circle in the SVG namespace, then append them.

JavaScript
const svgNS = "http://www.w3.org/2000/svg";

const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");

const circle = document.createElementNS(svgNS, "circle");
circle.setAttribute("cx", "50");
circle.setAttribute("cy", "50");
circle.setAttribute("r", "40");
circle.setAttribute("fill", "steelblue");

svg.appendChild(circle);
document.body.appendChild(svg);

console.log(svg.constructor.name); // "SVGSVGElement"
Try It Yourself

How It Works

  1. Store the SVG URI. Every SVG node must use that exact namespace string.
  2. Create the root. createElementNS(svgNS, "svg") returns an SVGSVGElement.
  3. Create the shape. A circle in the same namespace becomes an SVGCircleElement.
  4. Attach to the document. Append the circle into the SVG, then the SVG into body.

Example 2 — createElement("svg") vs createElementNS

See the wrong type you get without a namespace.

JavaScript
const svgNS = "http://www.w3.org/2000/svg";

const wrong = document.createElement("svg");
const right = document.createElementNS(svgNS, "svg");

console.log(wrong.constructor.name); // "HTMLUnknownElement"
console.log(right.constructor.name); // "SVGSVGElement"
console.log(wrong.namespaceURI);     // "http://www.w3.org/1999/xhtml"
console.log(right.namespaceURI);     // "http://www.w3.org/2000/svg"
Try It Yourself

How It Works

  1. Call createElement. HTML treats unknown tags as HTMLUnknownElement.
  2. Call createElementNS. The SVG namespace yields a real SVGSVGElement.
  3. Compare namespaceURI. Wrong path stays in the XHTML namespace; right path is SVG.
  4. Rule of thumb. Drawing SVG from script → always createElementNS.

Example 3 — XHTML Namespace Div

For HTML, createElementNS with the XHTML URI matches createElement("div").

JavaScript
const xhtmlNS = "http://www.w3.org/1999/xhtml";

const divNS = document.createElementNS(xhtmlNS, "div");
const divHTML = document.createElement("div");

console.log(divNS.namespaceURI);              // XHTML URI
console.log(divHTML.namespaceURI);            // same XHTML URI
console.log(divNS instanceof HTMLDivElement); // true
Try It Yourself

How It Works

  1. Use the XHTML URI. That is the HTML namespace in the DOM.
  2. Create with createElementNS. You get a normal HTMLDivElement.
  3. Create with createElement. Same namespace and interface for plain HTML.
  4. Prefer the simple API. For everyday HTML tags, stick with createElement().
Compatibility

Browser Support

Document.createElementNS() is a long-standing DOM API. MDN lists it as Baseline Widely available across modern browsers.

✓ Baseline · DOM

Document.createElementNS()

Supported in Chrome, Firefox, Safari, Edge, and other evergreen browsers. Safe for SVG and MathML creation in everyday web apps.

99% Universal API
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
createElementNS() Excellent

Bottom line: Safe everywhere you build SVG from script. Remember: HTML tags → createElement; SVG/MathML → createElementNS. See also the MDN createElementNS() reference.

Frequently Asked Questions

It creates a new Element with a given namespace URI and qualified name. Use it for SVG, MathML, or other namespaces in mixed documents.
No. MDN marks Document.createElementNS() as Baseline Widely available. It is not Deprecated, Experimental, or Non-standard.
Prefer createElement() for plain HTML tags. Use createElementNS() when you need an explicit namespace — especially SVG or MathML inside HTML.
In an HTML document, createElement("svg") returns an HTMLUnknownElement, so the SVG will not render correctly. Use createElementNS with http://www.w3.org/2000/svg.
XHTML: http://www.w3.org/1999/xhtml. SVG: http://www.w3.org/2000/svg. MathML: http://www.w3.org/1998/Math/MathML.
No. It returns a detached Element. Attach it with appendChild(), append(), or similar on a parent already in the document.

Next: createEvent()

Learn how document.createEvent() relates to creating and dispatching events (legacy path).

createEvent() tutorial →

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 Document createElement() Method JavaScript Document createEvent() Method