How can I add a class to a DOM element in JavaScript?

Javascript Problem Overview

How do I add a class for the div?

var new_row = document.createElement('div');

Javascript Solutions

Solution 1 - Javascript

This answer was written/accepted a long time ago. Since then better, more comprehensive answers with examples have been submitted. You can find them by scrolling down. Below is the original accepted answer preserved for posterity.

new_row.className = "aClassName";

Here's more information on MDN: className

Solution 2 - Javascript

Use the .classList.add() method:

const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);

<div class="foo"></div>

This method is better than overwriting the className property, because it doesn't remove other classes and doesn't add the class if the element already has it.

You can also toggle or remove classes using element.classList (see the MDN documentation).

Solution 3 - Javascript

Here is working source code using a function approach.

<html>
    <head>
        <style>
            .news{padding:10px; margin-top:2px;background-color:red;color:#fff;}
        </style>
    </head>

    <body>
    <div id="dd"></div>
        <script>
            (function(){
                var countup = this;
                var newNode = document.createElement('div');
                newNode.className = 'textNode news content';
                newNode.innerHTML = 'this created div contains a class while created!!!';
                document.getElementById('dd').appendChild(newNode);
            })();
        </script>
    </body>
</html>

Solution 4 - Javascript

3 ways to add a class to a DOM element in JavaScript

There are multiple ways of doing this. I will show you three ways to add classes and clarify some benefits of each way.

You can use any given method to add a class to your element, another way to check for, change or remove them.

The className way - Simple way to add a single or multiple classes and remove or change all classes.
The classList way - The way to manipulate classes; add, change or remove a single or multiple classes at the same time. They can easily be changed at any time in your code.
The DOM way - When writing code according to the DOM model, this gives a cleaner code and functions similar to the className way.

The className way

This is the simple way, storing all classes in a string. The string can easily be changed or appended.

// Create a div and add a class
var new_row = document.createElement("div");
new_row.className = "aClassName";

// Add another class. A space ' ' separates class names
new_row.className = "aClassName anotherClass";
// Another way of appending classes 
new_row.className = new_row.className + " yetAClass";

If an element has a single class, checking for it is simple:

// Checking an element with a single class
new_row.className == "aClassName" ;
if ( new_row.className == "aClassName" )
    // true

Removing all classes or changing them is very easy

// Changing all classes
new_row.className = "newClass";

// Removing all classes
new_row.className = "";

Searching for or removing a single class when multiple classes are used is difficult. You need to split the className string into an array, search them through one by one, remove the one you need and add all others back to your element. The classList way addresses this problem and can be used even if the class was set the className way.

The classList way

It is easy to manipulate classes when you need to. You can add, remove or check for them as you wish! It can be used with single or multiple classes.

// Create a div and add a class
var new_row = document.createElement("div");
new_row.classList.add( "aClassName" );

// Add another class
new_row.classList.add( "anotherClass" );
// Add multiple classes
new_row.classList.add( "yetAClass", "moreClasses", "anyClass" );

// Check for a class
if ( new_row.classList.contains( "anotherClass" ) )
    // true

// Remove a class or multiple classes
new_row.classList.remove( "anyClass" );
new_row.classList.remove( "yetAClass", "moreClasses" );

// Replace a class
new_row.classList.replace( "anotherClass", "newClass" );

// Toggle a class - add it if it does not exist or remove it if it exists
new_row.classList.toggle( "visible" );

Removing all classes or changing to a single class is easier done the className way.

The DOM way

If you write code the DOM way, this looks cleaner and stores classes in a string by setting the class attribute.

// Create a div, add it to the documet and set class
var new_row = document.createElement( "div" );
document.body.appendChild( new_row );
new_row.setAttribute( "class", "aClassName anotherClass" );

// Add some text
new_row.appendChild( document.createTextNode( "Some text" ) );

// Remove all classes
new_row.removeAttribute( "class" );

Checking for a class is simple, when a single class is being used

// Checking when a single class is used
if ( new_row.hasAttribute( "class" ) 
    && new_row.getAttribute( "class" ) == "anotherClass" )
    // true

Checking for or removing a single class when multiple classes are used uses the same approach as the className way. But the classList way is easier to accomplish this and can be used, even if you set it the DOM way.

Solution 5 - Javascript

If doing a lot of element creations, you can create your own basic createElementWithClass function.

function createElementWithClass(type, className) {
  const element = document.createElement(type);
  element.className = className
  return element;
}

Very basic I know, but being able to call the following is less cluttering.

const myDiv = createElementWithClass('div', 'some-class')

as opposed to a lot of

 const element1 = document.createElement('div');
 element.className = 'a-class-name'

over and over.

Solution 6 - Javascript

If you want to create multiple elements all with in one method.

function createElement(el, options, listen = [], appendTo){
    let element = document.createElement(el);
    Object.keys(options).forEach(function (k){
       element[k] = options[k];
    });
    if(listen.length > 0){
        listen.forEach(function(l){
           element.addEventListener(l.event, l.f);
        });
    }
    appendTo.append(element);
}


let main = document.getElementById('addHere');
createElement('button', {id: 'myBtn', className: 'btn btn-primary', textContent: 'Add Alert'}, [{
  event: 'click',
  f: function(){
    createElement('div', {className: 'alert alert-success mt-2', textContent: 'Working' }, [], main);
  }
}], main);

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div id="addHere" class="text-center mt-2"></div>

Solution 7 - Javascript

var newItem = document.createElement('div');
newItem.style = ('background-color:red'); 
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);

Solution 8 - Javascript

This is better way

let new_row = document.createElement('div');
new_row.setAttribute("class", "classname");
new_row.setAttribute("id", "idname");

Solution 9 - Javascript

Cross-browser solution

>Note: The classList property is not supported in Internet Explorer 9. The following code will work in all browsers:

function addClass(id,classname) {
  var element, name, arr;
  element = document.getElementById(id);
  arr = element.className.split(" ");
  if (arr.indexOf(classname) == -1) { // check if class is already added
    element.className += " " + classname;
  }
}

addClass('div1','show')

Source: how to js add class

Solution 10 - Javascript

var new_row = document.createElement('div');

new_row.setAttribute("class", "YOUR_CLASS");

This will work ;-)

source

Solution 11 - Javascript

It is also worth taking a look at:

var el = document.getElementById('hello');
if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
}

Solution 12 - Javascript

If you want to create a new input field with for example file type:

 // Create a new Input with type file and id='file-input'
 var newFileInput = document.createElement('input');

 // The new input file will have type 'file'
 newFileInput.type = "file";

 // The new input file will have class="w-95 mb-1" (width - 95%, margin-bottom: .25rem)
 newFileInput.className = "w-95 mb-1"

The output will be: <input type="file" class="w-95 mb-1">

If you want to create a nested tag using JavaScript, the simplest way is with innerHtml:

var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';

The output will be:

<li>
    <span class="toggle">Jan</span>
</li>

Solution 13 - Javascript

<script>
    document.getElementById('add-Box').addEventListener('click', function (event) {
        let itemParent = document.getElementById('box-Parent');
        let newItem = document.createElement('li');
        newItem.className = 'box';
        itemParent.appendChild(newItem);
    })
</script>

Content Type	Original Author	Original Content on Stackoverflow
Question	wow	View Question on Stackoverflow
Solution 1 - Javascript	Darko Z	View Answer on Stackoverflow
Solution 2 - Javascript	Michał Perłakowski	View Answer on Stackoverflow
Solution 3 - Javascript	Sunny S.M	View Answer on Stackoverflow
Solution 4 - Javascript	Hasse Björk	View Answer on Stackoverflow
Solution 5 - Javascript	jedensuscg	View Answer on Stackoverflow
Solution 6 - Javascript	xNaii	View Answer on Stackoverflow
Solution 7 - Javascript	Diego Slinger	View Answer on Stackoverflow
Solution 8 - Javascript	MD SHAYON	View Answer on Stackoverflow
Solution 9 - Javascript	Ravi Makwana	View Answer on Stackoverflow
Solution 10 - Javascript	PedroProgrammer	View Answer on Stackoverflow
Solution 11 - Javascript	Yoni	View Answer on Stackoverflow
Solution 12 - Javascript	Mile Mijatović	View Answer on Stackoverflow
Solution 13 - Javascript	Linkon	View Answer on Stackoverflow