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

How do I add a class for the div?

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

javascript dom

Solution 1:^[1]

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 2:^[2]

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 3:^[3]

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 4:^[4]

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 5:^[5]

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 6:^[6]

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 7:^[7]

This is better way

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

Solution 8:^[8]

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 9:^[9]

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

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

This will work ;-)

source

Solution 10:^[10]

It is also worth taking a look at:

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

Solution 11:^[11]

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 12:^[12]

<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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Peter Mortensen
Solution 2	Peter Mortensen
Solution 3
Solution 4	jedensuscg
Solution 5	xNaii
Solution 6	Diego Slinger
Solution 7	MD SHAYON
Solution 8	Community
Solution 9	MEDZ
Solution 10	Peter Mortensen
Solution 11	Peter Mortensen
Solution 12	Linkon

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

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

The className way

The classList way

The DOM way

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]