Creating elements with createElement

Learn to create a new HTML element and add it to the page.

Creating a new element

To create a new HTML element in JavaScript, you use the document.createElement method. It takes a tag name and produces a new element of that tag.

const card = document.createElement('div');

The element is not yet on the page; it lives in memory. To make it visible, you must add it to an existing element. Tag names are written in lowercase.

Set text on the element

To add text to the element you created, you use the textContent property. It places the text safely; HTML tags appear as text.

const title = document.createElement('h1');
title.textContent = 'Hello';

First you create the element, then you set its properties. The same way you can also set other properties like className or id. We will see how to add the element to the page in the next lesson.

Exercise Create a heading element

Define a variable named heading. Create a new heading element with document.createElement('h2') and assign a short text to its textContent property.

Show example solution

const heading = document.createElement('h2');
heading.textContent = 'Daily';

Test yourself

Which creates a new <p> element?

// A
const a = document.querySelector('p');
// B
const b = document.createElement('p');
// C
const c = document.getElementById('p');
// D
const d = document.createTextNode('p');

Show answer

B — Correct! createElement('p') makes a new <p> element.

Create a new li element

const item = document.____('li');

Show answer

const item = document.createElement('li');

Match methods to their meanings

document.createElement('span')

Makes a new span element
element.textContent = '...'

Sets the element's text
document.querySelector('span')

Selects the first span

Next lesson: appendChild and removeChild

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies