jQuery Add Class To Div Examples

In previous articles, we seen how to use jQuery to add div, add an element to div, add div to div, add text to div & add html to div. Now let’s say that you have a requirement for changing a div style on the fly i.e. you would like to change the way a div appears using a class. In this article, I am going to share easy examples of using jQuery to add class to div.

How to use jQuery to Add Class to Div

Let’s assume that we have a div with ID “my_div”. You would now like to add class to this div. There are 3 cases in this situation.

1. Add class to a div that does not have any another classes.

2. Add class to a div and replace any/all classed that it may have.

3. Add class to a div and simply append/add the new class to existing class(es).

So let’s take a look at each of these cases by means of examples.

Example 1: Add class to a div that does not have any another classes

<style type="text/css">
.existing_yellow {
	background-color: #FFFF99;
	border: 1px solid #FF0;
}
.existing_purple {
	background-color: #9999FF;
	border: 1px solid #90F;
}
.green {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
.blue {
	background-color: #E1F3FF;
	border: 1px solid #09F;
}
.red_text {
	color: #D70000;
	font-weight: bold;
}
.orange {	
	border: 10px solid #F90;
	color: #FFF;
	font-size: 200%;
	font-weight:bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;	
}

</style>

<div id="my_div1">This is MY DIV 1</div>

<input type="submit" name="sbt_add2div1" id="sbt_add2div1" value="Add Green class to DIV 1">

	//This will add class to the a div that does NOT have any class applied to it already
	$('#sbt_add2div1').on("click", function(e){		

		$('#my_div1').addClass('green');

		e.preventDefault();

	});

Example 2: Add class to a div and replace any/all classed that it may have

<style type="text/css">
.existing_yellow {
	background-color: #FFFF99;
	border: 1px solid #FF0;
}
.existing_purple {
	background-color: #9999FF;
	border: 1px solid #90F;
}
.green {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
.blue {
	background-color: #E1F3FF;
	border: 1px solid #09F;
}
.red_text {
	color: #D70000;
	font-weight: bold;
}
.orange {	
	border: 10px solid #F90;
	color: #FFF;
	font-size: 200%;
	font-weight:bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;	
}
</style>

<div id="my_div2" class="existing_yellow red_text">This is MY DIV 2</div>

<input type="submit" name="sbt_add2div2" id="sbt_add2div2" value="Replace all classes of DIV 2 with Blue Class">

	//This will add class to the a div that HAS classes applied to it already and will replace all existing classes with new class
	$('#sbt_add2div2').on("click", function(e){		

		$('#my_div2').attr('class', 'blue');

		e.preventDefault();

	});

Example 3: Add class to a div and simply append/add the new class to existing class(es)

<style type="text/css">
.existing_yellow {
	background-color: #FFFF99;
	border: 1px solid #FF0;
}
.existing_purple {
	background-color: #9999FF;
	border: 1px solid #90F;
}
.green {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
.blue {
	background-color: #E1F3FF;
	border: 1px solid #09F;
}
.red_text {
	color: #D70000;
	font-weight: bold;
}
.orange {	
	border: 10px solid #F90;
	color: #FFF;
	font-size: 200%;
	font-weight:bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;	
}
</style>

<div id="my_div3" class="existing_purple">This is MY DIV 3</div>    

<input type="submit" name="sbt_add2div3" id="sbt_add2div3" value="Add Orange Class to existing class of DIV 3">

	//This will retain all existing class and simply add/append your new class to existing classes
	$('#sbt_add2div3').on("click", function(e){				

		$('#my_div3').addClass('orange');

		e.preventDefault();

	});

Your Turn!

Do you know of any other ways to use  jQuery to add class to div? Feel free to share by commenting below.