Adding a class to an element is a common task when it comes to manipulating HTML elements dynamically. In this article, we will learn how to add a class to an element in JavaScript using various methods.<\/p>\n\n\n\n
As we know, JavaScript is the programming language used to dynamically change the behavior on a webpage by manipulating the element. If we can add a class to an element using JavaScript, we can apply new styles to elements based on user interactions or responsive design. This way makes the HTML markup cleaner and the JS code will be maintainable.<\/p>\n\n\n\n
Let\u2019s check out the four different methods to add a class to an element using JavaScript along with examples:<\/p>\n\n\n\n
The className property is the recommended way to add a class to an element in JavaScript. This property represents the class attribute of an element and allows us to assign or append class names.<\/strong><\/p>\n\n\n\n For example:<\/p>\n\n\n\n Here myElement refers to the HTML element to which we want to add the class, and \u201cnewClass\u201d is the name of the class we want to add.<\/p>\n\n\n\n If we want to add multiple classes together we can simply add them using spaces:<\/p>\n\n\n\n Here by using +=, we are appending to existing classes. If we want to replace current classes, i.e. we want to assign new classes and remove previous classes then we can simply use = instead of +=. Here\u2019s the code:<\/p>\n\n\n\n While using +=, we are appending a class to existing classes by concatenating classes. If we do not add a space before \u2018newClass\u2019, then we will join two class names and this will lead to unintended results:<\/p>\n\n\n\n Here, the original class of the element is \u2018existingClass\u2019, and we attempt to add a new class named \u2018newClass\u2019 without a space before it. The result will be that the classes are concatenated without a space, leading to a single combined name(\u2018existingClassnewClass\u2019). <\/p>\n\n\n\n The classList property of an HTML element provides a set of methods to manage classes. The .add() method specifically allows us to add one or more classes to an element. Using classList.add() method, we can add a class to an element in JavaScript.<\/p>\n\n\n\n This method is preferred over manipulating \u2018className\u2019 directly because it is more explicit and doesn\u2019t replace existing classes.<\/p>\n\n\n\n Here myElement refers to the HTML element to which we want to add the class, and \u201cnewClass\u201d is the name of the class we want to add.<\/p>\n\n\n\n If we want to add multiple classes together, we have to pass each class name as a separate argument to the \u2018add()\u2019 method. Here\u2019s an example:<\/p>\n\n\n\n In this example, the \u2018classList.add()\u2019 method is used to add three classes(\u2018class1\u2019, \u2018class2\u2019, and \u2018class3\u2019) to the element with the ID \u2018myElement\u2019.<\/p>\n\n\n\n Similar to the \u2018className\u2019 property, this method also replaces the entire class attribute, therefore causing unintended results. <\/p>\n\n\n\n The setAttribute() method in JavaScript allows us to set values to attributes of an element. If the attribute already exists, the method updates its value. Otherwise, a new attribute is added to the element along with the assigned value.<\/p>\n\n\n\n To add a class to an element using the setAttribute() method, we need to specify the attribute name as \u2018class\u2019 and the value as the name of the class we want to add. For example:<\/p>\n\n\n\n Here, by using the setAttribute() method, the \u2018previousClass\u2019 of the element is replaced by \u2018newClass\u2019. <\/p>\n\n\n\n The classList.toggle() method is a very unique apporach to add a class name to an element. When you use this method, it adds the specified class if it\u2019s not present and removes it if it’s present. <\/p>\n\n\n\n For example:<\/p>\n\n\n\n In this example, if the element initially has the class \u2018active\u2019, the toggle() method will remove it. If the element doesn\u2019t have the class \u2018active\u2019, the method will add it. <\/p>\n\n\n\n This method is used when we want to add or remove a class based on certain conditions (in response to events or state changes) without explicitly checking for its presence. Note that it does not remove other classes. <\/p>\n\n\n\n\/\/ Get the element by its ID\nvar myElement = document.getElementById('myElement');\n\n\/\/ Add a class to the element using className\nmyElement.className += ' newClass';<\/pre><\/div>\n\n\n\n\/\/ Get the element by its ID\nvar myElement = document.getElementById('myElement');\n\n\/\/ Add a class to the element using className\nmyElement.className += ' newClass1 newClass2 newClass3';<\/pre><\/div>\n\n\n\n\/\/ Get the element by its ID\nvar myElement = document.getElementById('myElement');\n\n\/\/ Add a class to the element using className\nmyElement.className = ' newClass';<\/pre><\/div>\n\n\n\n<body>\n\n <!-- An example element with an ID and an existing class -->\n <div id="myElement" class="existingClass">This is a sample element.<\/div>\n\n <script>\n \/\/ Get the element by its ID\n var myElement = document.getElementById('myElement');\n\n \/\/ Add a class without a space using className\n myElement.className += 'newClass';\n <\/script>\n\n<\/body><\/pre><\/div>\n\n\n\n2) Using classList.add() Method<\/strong><\/h3>\n\n\n\n
\/\/ Get the element by its ID\nvar myElement = document.getElementById('myElement');\n\n\/\/ Add a class to the element using classList.add()\nmyElement.classList.add('newClass');<\/pre><\/div>\n\n\n\n\/\/ Get the element by its ID\nvar myElement = document.getElementById('myElement');\n\n\/\/ Add multiple classes to the element using classList.add()\nmyElement.classList.add('class1', 'class2', 'class3');<\/pre><\/div>\n\n\n\n3) Using setAttribute() Method<\/strong><\/h3>\n\n\n\n
\/\/ Get the element by its ID\nvar Ele = document.getElementById('myElement');\n\n\/\/ Add a class to the element using className\nEle.className = 'previousClass';\n\n\/\/ Get the element by its ID\nvar myElement = document.getElementById('myElement');\n\n\/\/ Add a class to the element using setAttribute()\nmyElement.setAttribute('class', 'newClass');<\/pre><\/div>\n\n\n\n4) Using classList.toggle() Method<\/strong><\/h3>\n\n\n\n
\/\/ Get the element by its ID\nvar myElement = document.getElementById('myElement');\n\n\/\/ Toggle a class on the element using classList.toggle()\nmyElement.classList.toggle('active');<\/pre><\/div>\n\n\n\n