Skip to main content
X

Explore your training options in 10 minutes

jQuery methods: addClass()

Ryan Manchester - November 20, 2020


The jQuery addClass() method gives developers a way to change elements in a more global way. As the method name suggests, we can add a class attribute to a selected element. Why would we want to do this?

Let’s take an example of a web page that has some existing elements such as a title, a paragraph, and a button to click that does something. Along with this page is a stylesheet that uses these elements’ class name to style them. Upon clicking the button, existing content can change style, or appearance.

We could use the addClass() method to insert a new style attribute for the existing content after the button is clicked, which makes it possible to change the styling of existing content using only a line of code. Doing so allows the developer to think about manipulating elements in a styled fashion.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

Let’s dive deeper into the example and look at how we might code it.

How jQuery addClass() Works

In our example, we are changing an object’s class attribute when our button is clicked. Before we get into this example code, let’s take a look at how addClass() works. Suppose we have this HTML:

<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>

We are using <style> to include some basic styling for our <p> tag in the <head>. We’ve also included our jQuery API link. In the <body>, we have the words “Hello,” “and,” “Goodbye,” wrapped in three separate <p> tags. For us to see how addClass() works, let’s refer back to <style>.

There are two classes inside <style>. One is “selected,” which renders an attribute of color to the color blue. The other class is “highlight.” This class renders a background attribute as the color yellow. Right now, we can see none of these styles are rendering:

The styles aren’t rendering because there aren’t any classes associated with our <p> tags. Rather than going into our HTML and manually writing classes to <p>, we can use addClass() to insert any or all class attributes on any or all <p> element.

<script>
$(document).ready(() => {
  $('p').addClass('selected')
})
</script>

Here, we are simply selecting all <p> elements and adding to them a class attribute of ‘selected.’ We expect all instances of our <p> elements to now render in the color blue.

Just as we expected! The jQuery addClass() method is able to accept more than one class attribute as a single argument. For example:

<script>
$(document).ready(() => {
  $('p').addClass('selected highlight')
})
</script>

Notice the syntax of including both classes wrapped in one set of parentheses. This renders our <p> elements in both blue and with a background of the color yellow.

Now that we’ve seen how addClass() can add class attributes to elements, let’s return to our original example with a button.

Using jQuery addClass()

Here we’ve added a button to our first example:

<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>
<strong>jQuery addClass Example</strong>
</p>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<button>
Click to add class
</button>

The above code now renders a button, but it doesn’t do anything yet. In the previous example, we changed all of the <p> tags at the same time. Now let’s change only one element when the button is clicked. We could do this by incorporating the jQuery click() method.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

As a quick review of the click() method, we call it on the object selector we want to attach an event listener to. Then we pass click() a callback function as an argument. Remember that a callback function is just a function we pass as an argument to execute later. In this example, the callback function will execute once the button is clicked.

Let’s see it in action!

<script>
$('button').click(() => {
 $('p').last().addClass('selected')
})
</script>

In the callback function, we are selecting the <p> elements and calling last() to find the last instance of <p>. From here, we add the class attribute of ‘selected.’ We expect the last <p> element which refers to the word “Goodbye” to change color to blue once the button is clicked.

Let’s click the button and find out.

Exactly what we expected to see! We’ve seen how jQuery addClass() can be used generally through changing all <p> elements to the styled classes as soon as the page loads. We’ve also seen how addClass() can be used with other jQuery methods such as click() to specifically change the class attributes of one <p> element once the selected button is clicked.

Conclusion

Today, we’ve learned what jQuery addClass() is and how it works. We’ve also learned that addClass() is extremely flexible in scope and can change multiple class attributes at once. The above examples are meant to be basic illustrations of possible uses for jQuery addClass() . To go further, experiment on your own and find ways addClass() is useful to your web app.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Ryan Manchester

About the author: Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.

Skip to main content