JavaScriptDomBeginner

document.createElement()

Creates a new element node that you can configure and insert.

Review the syntaxStudy the examplesOpen the coding app
document.createElement(tagName)
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Creates a new element node that you can configure and insert.

document.createElement() creates a new HTMLElement instance specified by the tagName. The element is initially created in memory and is detached from the DOM tree, requiring a method like appendChild(), append(), or insertBefore() to become visible. This method is significantly more secure and performant than innerHTML because it avoids the overhead of the HTML parser and prevents Cross-Site Scripting (XSS) attacks by treating content as properties rather than raw strings. For batch updates, it is recommended to append newly created elements to a DocumentFragment first to minimize reflows and repaints. While HTML tag names are case-insensitive in this method, creating elements with non-standard names is allowed but will result in an HTMLUnknownElement. For namespaced elements like SVG or MathML, use document.createElementNS() instead.

Quick reference

Syntax

document.createElement(tagName)

Inputs

Parameters

tagNamestring · Tag name like 'div', 'li', 'button'.

See it in practice

Examples

1

Creating a Button with Properties

var btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.id = 'submit-btn';
btn.className = 'primary-ui';
btn.onclick = function() { console.log('Clicked!'); };
document.body.appendChild(btn);
console.log(btn.outerHTML);
Output:
"<button id=\"submit-btn\" class=\"primary-ui\">Click Me</button>"

Creates a button element, sets its text, ID, and class, and attaches an event listener before appending it to the body.

2

Dynamic List Generation

var items = ['Apples', 'Oranges', 'Bananas'];
var ul = document.createElement('ul');

items.forEach(function(item) {
  var li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li);
});

document.body.appendChild(ul);
console.log(ul.children.length);
Output:
3

Iterates through an array to create multiple list items and nests them within a parent unordered list.

3

Using DocumentFragment for Performance

var fragment = document.createDocumentFragment();
for (var i = 0; i < 3; i++) {
  var div = document.createElement('div');
  div.textContent = 'Section ' + i;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);
console.log('Fragment children appended');
Output:
"Fragment children appended"

Uses a DocumentFragment to batch multiple element insertions. This triggers only one browser reflow instead of three.

Debug faster

Common Errors

1

DOMException (InvalidCharacterError)

Cause: Passing a string that contains invalid characters, such as angle brackets or spaces.

Fix: Pass only the tag name as a plain string without HTML syntax.

document.createElement('<div>'); // Error: should be 'div'
2

LogicError

Cause: Creating an element but forgetting to append it to the document, leaving it invisible in memory.

Fix: Use parentElement.appendChild(newElement) to insert it into the active DOM tree.

var myDiv = document.createElement('div');
myDiv.textContent = 'Hello';
// Missing: document.body.appendChild(myDiv);

Runtime support

Compatibility

BrowserAll browsersModern DOM

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Creates a new element node that you can configure and insert.

tagName: Tag name like 'div', 'li', 'button'.

DOMException (InvalidCharacterError): Pass only the tag name as a plain string without HTML syntax. LogicError: Use parentElement.appendChild(newElement) to insert it into the active DOM tree.