How to Create Element in JavaScript: Simple Guide

To create an element in JavaScript, use document.createElement(tagName) where tagName is the type of element you want, like 'div' or 'p'. Then, you can add content or attributes and insert it into the page using methods like appendChild.

Syntax

The basic syntax to create an element is document.createElement(tagName).

• tagName: A string representing the HTML tag you want to create, for example, 'div', 'span', or 'button'.
• The method returns a new element object that you can modify before adding it to the page.

javascript

const element = document.createElement('tagName');

Example

This example creates a new div element, sets its text content, and adds it to the page inside the body.

javascript

const newDiv = document.createElement('div');
newDiv.textContent = 'Hello, I am a new div!';
document.body.appendChild(newDiv);

Output

A new div appears on the page with the text: Hello, I am a new div!

Common Pitfalls

Common mistakes include:

• Forgetting to add the created element to the document, so it never shows up.
• Trying to create elements with invalid tag names.
• Not setting content or attributes, resulting in empty elements.

javascript

/* Wrong: creates element but does not add it to the page */
const wrongDiv = document.createElement('div');
wrongDiv.textContent = 'I am invisible';

/* Right: append the element to the document */
document.body.appendChild(wrongDiv);

Output

The text 'I am invisible' appears on the page only after appendChild is called.

Quick Reference

Method	Description
document.createElement(tagName)	Creates a new element of the given tag.
element.textContent = 'text'	Sets the text inside the element.
element.setAttribute(name, value)	Adds or changes an attribute on the element.
parent.appendChild(element)	Adds the element to the page inside the parent.

Key Takeaways

Use document.createElement('tagName') to create a new HTML element.

Always add the created element to the document to make it visible.

Set text or attributes on the element before adding it to the page.

Invalid tag names will not create elements properly.

Use appendChild or similar methods to insert elements into the DOM.