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">
<meta charset="utf-8">
<title>Add Class to an Element Using JavaScript</title>
        padding: 20px;
        border: 2px solid #ccc;
        background: yellow;
    <div class="content" id="myDiv">
        <p>This is a paragraph of text.</p>
        <button type="button" onclick="addNewClass();">Add Class</button>
    function addNewClass(){
        // Select div element by its id attribute
        var elem = document.getElementById("myDiv");
        elem.className += " highlight";

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>
 // Selecting element
 var elem = document.getElementById("myDiv");     
 elem.classList.add("highlight");  // Add a highlight class
 elem.classList.remove("alert");  // Remove alert class

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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties