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:
Example
Try this code »<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:
