# How to create a DOM element using JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Mar 7, 2020, updated Oct 6, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-create-dom-element

> A brief guide to learning how to create a DOM element using vanilla JavaScript.

In JavaScript, you can use the `createElement()` method to create a new [DOM](https://attacomsian.com/blog/getting-dom-elements-javascript) 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:

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

The `createElement()` method *only* needs the element name:

```javascript
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:

```javascript
// 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:

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

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

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

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