jQuery addClass with HTML table, button, links and list demos

Purpose of addClass method

The jQuery addClass method is used to add class(es) to specified HTML elements. You may add one or more classes in a single call.

If matched elements are more than one, the addClass method will add the given class(es) to all matched elements.

For example, if you specified “div” as sector and your web page contains one or more divs, the jQuery addClass will add given classes to all div elements.

 

Syntax of addClass jQuery

This is how you can use the addClass method:

 

To add more than one classes, separate class names by space:

 

I will show you jQuery $.addClass demos with HTML div, table, link, button and list elements in the following section.

An example of using addClass with a div element

In the demo, a div is created without any class initially. As you click the button “Add Class to div”, it will add a CSS class created in the <style> section of <head> tag to that div. See the demo online:

jQuery addClass

See online demo and code

The following code is used in the click event of button to add a class:

 

A demo of addClass with a div having a class already

Generally, the addClass method is used with the removeClass method. For that, first remove the used class by using removeClass method which is followed by addClass jQuery method. See this demo online:

jQuery addClass removeClass div

See online demo and code

This time, the following code is used in the <script> section:

 

You see, first I removed the divcls CSS class that was applied initially. After that, I used addClass method to add the addcls class to that div.

A demo of addClass with HTML table

In this demo, an HTML table is created with a default class. A dropdown is also given where you may choose a different theme or class for that table.

As you select a theme from the dropdown, the new theme will be applied to that table by using jQuery addClass method. First, have a look at that demo:

jQuery addClass table

See online demo and code

You can see the code in the demo page which is lengthy. As my focus is to explain the addClass method, so let me dig into this only.

The HTML table was created with an id=tbl and the demotbl class which is defined in the <style> section. The <style> section has two other classes for that table.

In the dropdown, the values are set to the class names that I created in the <style> section.

As you select an option, the select change event happens, which is used in the <script> section just above the </body> tag. The selected value is assigned to a variable:

 

The next line of code removes the existing class by using removeClass method and adds the new class by using addClass method:

 

That’s it!

An example with HTML button

Similarly, you can use the addClass method to add the class(es) in HTML buttons. In this example, as you click the button, a class of CSS will be added to that button that contains properties to change the background, border, font-size, font-family etc. of that button.

See the demo online:

jQuery addClass button

See online demo and code

A demo with HTML lists

In this example, I have created a list with a few menu items. Three links are given under the menu to change the theme. Upon clicking each link, the click event of that link occurs where I used the addClass method with removeClass to add the new class.

jQuery addClass list

See online demo and code

Basically, the <li> and <a> tags of menu are contained in the <div> element which CSS class is changed at the click event of respective link by using this code:

 

 

Also see: jQuery removeClass