Skip to main content

How to Create an Element with an ID and Classes in JavaScript

Dynamically creating and styling HTML elements is a core part of modern web development. You often need to generate new elements from scratch, assign them specific IDs and classes for styling and identification, and then add them to the page.

This guide will teach you the modern, standard method for creating a new element, setting its essential attributes like id and class, and adding it to the DOM.

The Core Process: Create, Configure, and Append​

The process of creating a new, fully-formed element involves three main steps:

  1. Create: Use document.createElement('tagName') to create a new, detached DOM element.
  2. Configure: Set its properties and attributes. This includes its id, className or classList, textContent, and any other necessary attributes.
  3. Append: Add the newly created element to the DOM tree using a method like appendChild() or append(), making it visible on the page.

We will start with a simple container to which we'll add our new element.

<head>
  <style>
    .bg-yellow { background-color: yellow; }
    .text-large { font-size: 2rem; }
    #my-element { border: 2px solid blue; padding: 10px; }
  </style>
</head>
<body>
  <div id="container"></div>
</body>

This example demonstrates the full create-configure-append process.

// 1. Create a new <div> element
const newElement = document.createElement('div');

// 2. Configure its properties and attributes
newElement.id = 'my-element';
newElement.classList.add('bg-yellow', 'text-large');
newElement.textContent = 'Hello, world!';

// 3. Append the new element to the container
const container = document.getElementById('container');
container.appendChild(newElement);

After this code runs, a new, fully styled div will appear inside the #container element.

The classList Property (Best Practice for Classes)​

When you need to add, remove, or check for classes on an element, the element.classList property is the modern and most powerful tool. It provides a set of simple methods to manage classes without manual string manipulation.

  • classList.add('class1', 'class2', ...): Adds one or more classes.
  • classList.remove('class1'): Removes a class.
  • classList.toggle('class1'): Adds a class if it's missing, or removes it if it exists.
  • classList.contains('class1'): Returns true or false if the class exists.
const el = document.createElement('div');

// Add multiple classes at once
el.classList.add('bg-yellow', 'text-large');

// Add another class later
el.classList.add('p-4');

// Remove a class
el.classList.remove('bg-yellow');

console.log(el.className); 
// Output: "text-large p-4"
note

This is the recommended best practice for managing an element's classes.

A Reusable Function for Creating Elements​

For cleaner and more maintainable code, it's a great practice to encapsulate the element creation logic in a reusable helper function.

/**
 * Creates an element with a given tag, ID, and classes.
 * @param {string} tag The HTML tag name (e.g., 'div', 'p').
 * @param {object} [options] Optional configuration.
 * @param {string} [options.id] The ID to set on the element.
 * @param {string[]} [options.classes] An array of classes to add.
 * @returns {HTMLElement} The newly created element.
 */
function createElement(tag, options = {}) {
  const el = document.createElement(tag);
  if (options.id) {
    el.id = options.id;
  }
  if (options.classes && options.classes.length > 0) {
    el.classList.add(...options.classes);
  }
  return el;
}

// Example Usage:
const myNewDiv = createElement('div', {
  id: 'my-element',
  classes: ['bg-yellow', 'text-large'],
});
myNewDiv.textContent = 'Created with a helper function!';

document.getElementById('container').appendChild(myNewDiv);

A Note on className vs. classList​

You will often see the className property used to set classes. While it works, classList is generally superior.

  • element.className = 'class1 class2': This replaces all existing classes with a new string. It's a destructive operation and requires careful string manipulation to add or remove a single class.
  • element.classList.add('class3'): This appends a new class, leaving the existing ones untouched. It's a safer, more declarative API.

For modern development, you should prefer classList over className for all class manipulations.

Conclusion​

Creating and configuring new elements is a fundamental part of dynamic web development.

  • Follow the three-step process: create (createElement), configure (set id, textContent, etc.), and append (appendChild).
  • For managing CSS classes, the element.classList property is the modern and recommended best practice. It provides a clean and safe API for adding, removing, and checking classes.
  • For cleaner code, consider creating a reusable helper function to encapsulate your element creation logic.

Table of Contents