How to Add a Class to a Given Element in JavaScript

Topic: JavaScript / jQueryPrev|Next

Answer: Use the className Property

If you want to add a class to an HTML element without replacing its existing class, you can do something as shown in the following example:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Add Class to an Element Using JavaScript</title>
  • <style>
  •     .content{
  •         padding: 20px;
  •         border: 2px solid #ccc;
  •     }
  •     .highlight{
  •         background: yellow;
  •     }
  • </style>
  • </head>
  • <body>
  •     <div class="content" id="myDiv">
  •         <p>This is a paragraph of text.</p>
  •         <button type="button" onclick="addNewClass();">Add Class</button>
  •     </div>
  •     <script>
  •     function addNewClass(){
  •         // Select div element by its id attribute
  •         var elem = document.getElementById("myDiv");
  •         elem.className += " highlight";
  •     }
  •     </script>
  • </body>
  • </html>

In the example above, the addNewClass() function adds a new class highlight to the DIV element that already has a class box without removing or replacing it using the className property.

Alternatively, you can also use the classList property to add/remove classes to an element, like this:

  • <div class="alert info" id="myDiv">Important piece of information!</div>
  • <script>
  • // Selecting element
  • var elem = document.getElementById("myDiv");     
  • elem.classList.add("highlight");  // Add a highlight class
  • elem.classList.remove("alert");  // Remove alert class
  • </script>

The classList property is supported in all modern browsers. Not supported in IE prior to version 10.

Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.