JavaScript Document createElement() Method

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

Definition

document.createElement(localName) creates a new element with the given tag name and returns it. On an HTML page you usually get an HTMLElement. The node is detached until you append it.

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

Syntax

Call document.createElement. Start with this line.

JavaScript
document.createElement(localName)
CallWhat it does
document.createElement(localName)Primary signature.
document.createElement(...)Call with the arguments your case needs.

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

Library declarations
JavaScript
document.createElement(localName)

Parameters

ParameterDescription
localNameRequired. Tag name (e.g. "p", "button")
optionsOptional. Advanced: is for customized built-in custom elements

Return Value

Return ValueDescription
*New element (not yet in the tree)

JavaScript Examples

Example 1 — Create, Set Text, Append

Build a div, give it text, then attach it to a parent.

JavaScript
const parent = document.createElement("section");
const el = document.createElement("div");
el.textContent = "Hi there and greetings!";
parent.appendChild(el);

console.log(parent.children.length); // 1
console.log(el.tagName); // "DIV"
console.log(el.textContent); // "Hi there and greetings!"
Try It Yourself

How It Works

  1. Create a parent. A section will hold the new node.
  2. Create the element. createElement("div") returns a detached div.
  3. Set content. textContent is the simplest way to add text.
  4. Append. Until appendChild, the element is not in any tree.

Example 2 — HTML Lowercases the Tag Name

On HTML documents, "DIV" and "div" create the same kind of element.

JavaScript
const a = document.createElement("DIV");
const b = document.createElement("div");

console.log(a.localName); // "div"
console.log(b.localName); // "div"
console.log(a.tagName); // "DIV"
console.log(a.constructor === b.constructor); // true
Try It Yourself

How It Works

  1. Pass uppercase. HTML documents still lowercase the name first.
  2. Check localName. Both are "div".
  3. Check tagName. HTML reports uppercase "DIV" for HTML elements.
  4. Habit. Prefer lowercase tag strings in your code for clarity.

Example 3 — Invalid Name Throws

Empty or illegal tag names raise InvalidCharacterError.

JavaScript
try {
  document.createElement("");
} catch (err) {
  console.log(err.name); // "InvalidCharacterError"
}

try {
  document.createElement("bad name");
} catch (err) {
  console.log(err.name); // "InvalidCharacterError"
}
Try It Yourself

How It Works

  1. Empty string. A tag name must be at least one valid character.
  2. Spaces. ASCII whitespace is not allowed in a tag name.
  3. Catch the error. Modern browsers report InvalidCharacterError.
  4. Fix. Pass a simple name like "div", "span", or "button".
Compatibility

Browser Support

Document.createElement() is a browser DOM API marked Baseline Widely available. The basic one-argument form works everywhere; custom-element options vary by browser.

✓ Baseline Widely available

Document.createElement()

Supported in Chrome, Firefox, Safari, Edge, Opera, and Internet Explorer. Creates detached HTML elements you append into the DOM.

Baseline Widely available
Google Chrome All modern versions
Yes
Microsoft Edge All modern versions
Yes
Mozilla Firefox All modern versions
Yes
Apple Safari All modern versions
Yes
Opera All modern versions
Yes
Internet Explorer IE 6+
Yes
createElement() Excellent in browsers

Bottom line: Safe for everyday HTML element creation. See the MDN createElement() reference.

Frequently Asked Questions

It creates a new element with the given tag name (localName). On an HTML document it returns an HTMLElement, or HTMLUnknownElement if the tag is not recognized.
No. Document.createElement() is Baseline Widely available. It is not Deprecated, Experimental, or Non-standard. Optional custom-element options (like is) have varying browser support.
No. It returns a detached node. Attach it with appendChild, append, prepend, or insertBefore on a parent in the document.
Yes on HTML documents. createElement("DIV") and createElement("div") both create a lowercase div. Do not pass qualified names like "html:a".
Use createElementNS(namespaceURI, qualifiedName) when you need an explicit namespace — for example SVG or MathML. Prefer createElement() for normal HTML tags.
An invalid localName throws InvalidCharacterError (DOMException). Empty strings and names with spaces are common mistakes.

Next: createElementNS()

Learn how to create namespaced elements with document.createElementNS().

createElementNS() 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 createDocumentFragment() Method JavaScript Document createElementNS() Method