Create A DOM Element - JavaScript Tutorial

Skip to content

Home » Create a DOM Element

This tutorial shows you how to create a DOM element and attach it to the DOM tree.

To create a DOM element, you use the createElement() method.

const element = document.createElement(htmlTag);Code language: JavaScript (javascript)

The following example creates a new <div> element:

const e = document.createElement('div');Code language: JavaScript (javascript)

And fill the <div> element with any HTML content:

e.innerHTML = 'JavaScript DOM';Code language: JavaScript (javascript)

And attach the <div> element to the DOM tree by using the appendChild() method:

document.body.appendChild(e);Code language: CSS (css)

Besides using the innerHTML property, you can use the DOM methods to create text nodes and append the text nodes to the new element:

var textnode = document.createTextNode('JavaScript DOM'); e.appendChild(textnode); Code language: JavaScript (javascript)

After that, you can use the appendChild() method to attach the new element to the DOM tree.

Send Cancel PreviouslyGet the Closest Element by Selector Up NextReplace a DOM Element Search for:

Getting Started

• What is JavaScript
• Install a JavaScript Code Editor
• Meet the Console Tab of Devtools
• JavaScript Hello World

JavaScript Fundamentals

• Syntax
• Variables
• Data Types
• Number
• Numeric Separator
• Boolean
• String
• Object
• Primitive vs. Reference Values
• Array

JavaScript Operators

• Arithmetic Operators
• Remainder Operator
• Assignment Operators
• Unary Operators
• Comparison Operators
• Logical Operators

Control Flow

• if
• if else
• if else if
• Ternary Operator (?:)
• switch case
• while
• do while
• for
• break
• continue
• Comma Operator

JavaScript Functions

• Functions
• Functions are First-Class Citizens
• Anonymous Functions
• Understanding Pass-By-Value in JavaScript
• Recursive Functions
• Default Parameters

JavaScript Objects

• Object Methods
• Constructor Functions
• Prototype
• Constructor/Prototype Pattern
• Prototypal Inheritance
• JavaScript this
• globalThis
• Object Properties
• for…in Loop
• Enumerable Properties
• Own Properties
• Factory Functions
• Object Destructuring
• Optional Chaining Operator
• Object Literal Syntax Extensions

Classes

• Class
• Getters & Setters
• Class Expressions
• Computed Properties
• Inheritance
• new.target
• Static Methods
• Static Properties
• Private Fields
• Private Methods
• instanceof Operator

Advanced Functions

• Function Type
• The call() Method
• The apply() method
• The bind() Method
• Closures
• Immediately Invoked Function Expression (IIFE)
• Returning Multiple Values
• Arrow Functions
• Arrow Functions: Do & Don’t
• Rest Parameters
• Callback

Promises & Async/Await

• Promises
• Promise Chaining
• Promise.all()
• Promise.race()
• Promise.any()
• Promise.allSettled()
• Promise.prototype.finally()
• Promise Error Handling
• async/await
• Promise.withResolvers()

JavaScript Modules

• Modules
• Dynamic Import
• Top-level Await Modules

Javascript Error Handling

• try…catch
• try…catch…finally
• Throw an Exception
• Optional catch Binding

JavaScript Runtime

• Execution Context
• Call Stack
• Event Loop
• Hoisting
• Variable Scopes

Primitive Wrapper Types

• Primitive Wrapper Types
• Boolean
• Number
• BigInt
• String

More JavaScript Operators

• Falsy
• Nullish Coalescing Operator
• Logical Assignment Operators
• Exponentiation Operator