Document

document.createElement

Creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName is not recognized

Syntax

JavaScript
document.createElement(tagName, options?)

Parameters

ParameterTypeDescription
tagNamestringA string specifying the type of element to create
optionsElementCreationOptionsOptional object with an is property for custom elements

Return Value

The new Element

Examples

Basic Usage
const div = document.createElement('div')
div.className = 'card'
div.textContent = 'New Card'
document.body.appendChild(div)
Practical Example
const link = document.createElement('a')
link.href = 'https://example.com'
link.textContent = 'Visit Example'
link.target = '_blank'
Advanced Usage
function createButton(text: string, onClick: () => void) {
  const btn = document.createElement('button')
  btn.textContent = text
  btn.addEventListener('click', onClick)
  return btn
}

Understanding document.createElement

The document.createElement method in JavaScript creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName is not recognized. It belongs to the Document object and is one of the most widely used methods for working with document values in modern JavaScript and TypeScript applications.

The method signature is document.createElement(tagName, options?). It accepts 2 parameters: tagName, options. When called, it returns the new element. Understanding when and how to use createElement() helps you write more expressive, readable code.

Common use cases for document.createElement include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like dom-createtextnode, dom-appendchild, dom-append, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for document.createElement is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.

Browser Compatibility

Supported in all modern browsers (Chrome, Firefox, Safari, Edge) and Node.js. Part of the ECMAScript standard.

Related Methods

More Document Methods

Other methods in the Document object

Related Tools

More Document Methods

Explore JavaScript Methods

Browse our complete reference of 410 JavaScript methods with syntax, examples, and explanations.