Create an element with Class using JavaScript

In JavaScript, you can use the .createElement() method to create any element dynamically. Now, there are two simple methods that you can use in JavaScript to add class to the dynamically created elements.

image

Create element with class in JavaScript

With class, I mean a CSS class selector and it is defined inside the <style> tag or in a .css file (externally). Now, every element has some attributes and the class attribute is one of them. For example, I have a class called .myClass.

<style>
    .myClass { font: 18px Calibri; }
</style>

Here’s a <div> element, which has a class attribute (or property) with the value .myClass (the class name).

<div class="myClass">
    … some content here. 
</div>

You can assign the CSS class to any element on your web page.

Now, let’s see how to create an element with a class, dynamically using JavaScript. There are two ways you can do this, using the .setAttrbute() method or the className property.

Using setAttribute() method

Use the .setAttribute() method, when you want to set the value of an attribute. The class is an attribute and you can use the setAttribute() to add a class name. You can assign multiple class names using this method.

<!DOCTYPE html>
<html>
<head>
    <style>
    	.myClass 
        {
            font: 18px Calibri; 
            border: solid 1px red; 
            padding: 10px;
      	}
    </style>
</head>

<body>
 
</body>

<script>
let create_ele_with_class = () => {
    const ele = document.createElement('div');     // Create a DIV element.
    ele.innerHTML = "Hello, I am Arun Banik :-)";  // Add some content in DIV.

    // Add a class to the element. You can add multiple class names, separeted by space.
    ele.setAttribute ('class', 'myClass');
    
    document.body.appendChild(ele);            // Finally, add the element to the body.
}

create_ele_with_class();	

</script>
</html>

Try it

Note: You can assign a class name to any number of elements on you web page.

Using className property

The className is a DOM property. Use className when you are trying to add a class, specifically, to an element. This property too allows you to add multiple class names to an element.

<!DOCTYPE html>
<html>
<head>
    <style>
    	.myClass 
        {
            font: 18px Calibri; 
            border: solid 1px blue; 
            padding: 10px 20px;
      	}
    </style>
</head>
<body>
 	
</body>
<script>
let create_ele_with_class = () => {
    const ele = document.createElement('div');      // Create a DIV element.
    ele.innerHTML = 'Hello, I am Arun Banik :-)';

    // Add a class to the element. You can add multiple class names seperated by a space.
    ele.className = 'myClass';
    
    document.body.appendChild(ele);
}

create_ele_with_class();	

</script>
</html>

Try it

Both the methods work fine. It will add a class to a dynamically created element. Not just dynamically created elements, you can use the methods to add class to any element, which you have added in your web page at design time. Use it according to your requirement.

Remember: The className is quicker than the .setAttribute() method, since with className you are assigning a class to the element specifically.

So, if you can create elements dynamically in JavaScript, you can also get the elements at runtime or dynamically using JavaScript. Here’s how you should do this.

← PreviousNext →