How to create a DOM element using JavaScript

In JavaScript, you can use the createElement() method to create a new DOM element. This method takes the element name as input and creates a new HTML element with the given name.

Unlike jQuery's $(...) method, which takes the element's opening and closing tag as input to create a new element:

const div = $('<div></div>')

The createElement() method only needs the element name:

const anchor = document.createElement('a')
const div = document.createElement('div')
const article = document.createElement('article')

After the element is created, you can use the innerText or innerHTML properties of the element to add text as well as child HTML nodes:

// add text
div.innerText = 'Hey, there!'

// add child HTML nodes
div.innerHTML = '<p>Hello World!!!</p>'

This method is not just limited to HTML tags. You can even create custom tags of your own choice:

const unicorn = document.createElement('unicorn')
// <unicorn></unicorn>

To append the newly created HTML element to the document, JavaScript provides appendChild() method:

// create a new element
const div = document.createElement('div')
div.innerText = 'Hey, there!'

// append element to body
document.body.appendChild(div)

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.