createElement

createElement is a common name in JavaScript web development, referring to two related APIs that create elements in different contexts: the DOM API used to construct actual HTML elements within a document, and React’s API used to define elements in the virtual DOM.

In the Web Platform, the primary function is document.createElement(tagName). This method creates a new Element node of the given tag name, which is not yet attached to the document. The resulting element can be customized by setting properties (for example, id, className, or textContent) and attributes (via setAttribute). It can also be appended to the page or to another node. For namespaced contexts such as SVG or XML, document.createElementNS(namespaceURI, qualifiedName) is used. Custom elements may be created with an optional options object in some environments, enabling features such as customized built-in elements. Typical usage involves creating an element and then inserting it into the DOM, often after configuring its attributes and children.

In React, React.createElement is a function that creates a virtual element description used by the React library to render UI. It takes a type (such as a string like 'div' or a component), a props object, and any number of children, and returns an element descriptor rather than a real DOM node. JSX syntax is typically transformed into calls to React.createElement during compilation, e.g., React.createElement('div', {className: 'foo'}, 'Hello'). React.createElement remains foundational for composing components and elements before React renders them to the DOM.

See also: document.createElement, document.createElementNS, createDocumentFragment, createElementNS, React.createElement.