How to create a DOM element using JavaScript

In vanilla 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 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.

Last Updated: March 07, 2020