Skip to main content

How to Create an Element with Attributes and Styles in JavaScript

Dynamically creating new DOM elements is a fundamental part of building interactive web applications. While creating a basic element is simple, you almost always need to add attributes (like id, class, or title) and styles to make it functional and visible.

This guide will teach you the most effective methods for creating and configuring new elements. You will learn the classic .setAttribute() method, the direct property-setting approach, and the modern, highly recommended Object.assign() pattern for a clean and declarative setup.

The Core Method: document.createElement()​

The first step is always to create a new element in memory using the document.createElement() method. This method takes a string representing the HTML tag you want to create.

// Creates a new <div> element that exists only in memory for now.
const myDiv = document.createElement('div');

Once the element is created, you can configure it before adding it to the DOM.

Setting Attributes: .setAttribute() vs. Direct Properties​

There are two primary ways to set attributes on a new element.

Method 1: The .setAttribute() Method​

The element.setAttribute() method is a universal way to set any HTML attribute as a string.

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

// Set standard attributes
myDiv.setAttribute('id', 'my-element');
myDiv.setAttribute('class', 'box active');
myDiv.setAttribute('title', 'This is my element');

// Also works for boolean attributes (the value can be an empty string)
myDiv.setAttribute('disabled', '');

Method 2: Direct Property Assignment (More Common)​

For most standard attributes, you can set them directly as properties on the element object. This is often more concise and is the more common approach.

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

myDiv.id = 'my-element';
myDiv.className = 'box active'; // Note: `class` is a reserved word, so you use `className`
myDiv.title = 'This is my element';
myDiv.disabled = true; // For boolean properties, use `true` or `false`

How to Set Styles: The .style Property​

While you could set the style attribute as a long string with .setAttribute(), the best practice is to use the element.style object. This provides a clean and safe way to set individual CSS properties.

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

// Access the .style object to set CSS properties
myDiv.style.backgroundColor = 'salmon';
myDiv.style.color = 'white';
myDiv.style.width = '150px';
myDiv.style.height = '150px';
note

CSS property names that contain a hyphen (like background-color) are converted to camelCase (e.g., backgroundColor) in JavaScript.

The most elegant, readable, and modern way to configure a new element is to use Object.assign(). This method allows you to set multiple properties on an object from another object, making your setup code declarative and clean.

Problem: setting many properties one by one can be verbose.

const myDiv = document.createElement('div');
myDiv.id = 'my-element';
myDiv.className = 'box';
myDiv.textContent = 'Hello World';
// ... and so on

Solution: with Object.assign(), you can do it all at once.

const myDiv = Object.assign(document.createElement('div'), {
  id: 'my-element',
  className: 'box active',
  textContent: 'Hello World', // Use textContent for plain text
  onclick: () => console.log('Element clicked!'),
});

// You can also assign styles with the .style object property
Object.assign(myDiv.style, {
  backgroundColor: 'salmon',
  color: 'white',
  padding: '20px',
});

// Finally, add the fully configured element to the DOM
document.body.appendChild(myDiv);
note

This pattern is the recommended best practice as it cleanly separates the creation of the element from its configuration.

Practical Example: A Reusable Element Creation Function​

You can encapsulate the Object.assign() pattern in a helper function to make creating new elements throughout your application incredibly simple.

/**
 * Creates a DOM element with specified properties and children.
 * @param {string} tag - The HTML tag for the element.
 * @param {object} props - An object of properties to assign to the element.
 * @param {Array<Node|string>} children - An array of child nodes or strings to append.
 * @returns {HTMLElement}
 */
function createElement(tag, props, children = []) {
  const el = document.createElement(tag);
  Object.assign(el, props);
  if (children.length > 0) {
    el.append(...children);
  }
  return el;
}

// Example Usage:
const newButton = createElement('button', {
  className: 'btn btn-primary',
  textContent: 'Click Me',
  onclick: () => alert('Button clicked!'),
});

document.body.appendChild(newButton);

Conclusion​

Creating and configuring DOM elements is a fundamental skill in JavaScript.

  • Always start with document.createElement(tag).
  • For setting individual properties, direct assignment (el.id = ...) or .setAttribute() are fine. For styles, always use the .style object.
  • The recommended best practice for setting multiple properties is to use Object.assign(). It is declarative, clean, and highly readable.
  • Consider creating a reusable helper function to streamline element creation in your projects.

Table of Contents