What is createElementNS in JavaScript?

In JavaScript, createElementNS is a method of the Document interface that is used to create an element with a specified namespace URI. Unlike createElement, which creates elements in the default HTML namespace, createElementNS allows you to create elements belonging to other namespaces, such as SVG or MathML.

Here's a breakdown of its purpose and usage:

Purpose:

The primary purpose of createElementNS is to enable the creation of elements that are not part of the standard HTML vocabulary. This is crucial when working with technologies like:

- SVG (Scalable Vector Graphics): For creating vector graphics elements like <svg>, <circle>, <path>, etc.

- MathML (Mathematical Markup Language): For creating mathematical equations and expressions using elements like <math>, <mrow>, <mi>, etc.

- XML (Extensible Markup Language): For creating elements in custom XML documents.

Syntax:

The syntax for createElementNS is as follows:

document.createElementNS(namespaceURI, qualifiedName);

Where:

- `namespaceURI`: A string representing the namespace URI of the element you want to create. For example, "http://www.w3.org/2000/svg" for SVG elements or "http://www.w3.org/1998/Math/MathML" for MathML elements.

- `qualifiedName`: A string representing the qualified name of the element, which includes the prefix (if any) and the local name. For example, "svg", "circle", or "math".

Example:

Here's an example of how to create an SVG circle element using createElementNS:

const svgNS = "http://www.w3.org/2000/svg";
const svgElement = document.createElementNS(svgNS, "svg");
svgElement.setAttribute("width", "100");
svgElement.setAttribute("height", "100");
const circleElement = document.createElementNS(svgNS, "circle");
circleElement.setAttribute("cx", "50");
circleElement.setAttribute("cy", "50");
circleElement.setAttribute("r", "40");
circleElement.setAttribute("fill", "red");
svgElement.appendChild(circleElement);
document.body.appendChild(svgElement);

In this example, we first define the SVG namespace URI. Then, we create an <svg> element and a <circle> element within that namespace. We set attributes for both elements and append the circle to the SVG, and finally, append the SVG to the document body.

Key Differences from `createElement`:

- `createElement` creates elements in the default HTML namespace, while `createElementNS` allows you to specify a different namespace.

- If you try to create an SVG element using `createElement`, it will not be rendered correctly because it will be treated as an HTML element.

When to Use `createElementNS`:

Use createElementNS when you need to create elements that belong to a namespace other than the default HTML namespace, such as SVG, MathML, or custom XML documents. If you are creating standard HTML elements, you can use createElement.

In summary, createElementNS is a crucial method for working with non-HTML content in JavaScript, enabling the creation of elements within specific namespaces, which is essential for technologies like SVG and MathML.

Learn more about this