jQuery - Add class name to element(s)

Add class name to element(s) in jQuery

In this tutorial, you will learn how to add a class name to the element(s) using jQuery.

Solution

To add a class name to the element(s) in the document using jQuery, you can use the addClass() method. Call the addClass() method on the element or elements, and pass the required class name.

element.addClass("my-class-name");

where you can replace the my-class-name with the required class name.

You can also add more than one class names in the same method call, as shown in the following code.

element.addClass("class1 class2 class3");

Programs

1. In the following script, when user clicks on the button, we add the class name "title" to the first Heading 2.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#action").click(function() {
          // Select the odd indexed elements
          var element = $("h2:first");
    
          // Add class name to the element
          element.addClass("title");
        });
      });
    </script>
    <style>
      .title {
        color: red;
        border-bottom: 1px solid;
      }
    </style>
  </head>
  <body>
    <h2>Hello User!</h2>
    <input type="submit" id="action" value="Click Me"></input>
    <p>This is a paragraph.</p>
    <p>This is second paragraph.</p>
    <p>This is third paragraph.</p>
    <p>This is fourth paragraph.</p>
    <h2>Another section</h3>
    <p>This is fifth paragraph.</p>  
  </body>
</html>

2. In the following script, when user clicks on the button, we select the even indexed paragraphs and add the class name "highlite" to these elements.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#action").click(function() {
          // Select the odd indexed elements
          var elements = $("p:even");
    
          // Add class name to the elements
          elements.addClass("highlite");
        });
      });
    </script>
    <style>
      .highlite {
        background: yellow;
      }
    </style>
  </head>
  <body>
    <h2>Hello User!</h2>
    <input type="submit" id="action" value="Click Me"></input>
    <p>This is a paragraph.</p>
    <p>This is second paragraph.</p>
    <p>This is third paragraph.</p>
    <p>This is fourth paragraph.</p>
    <h2>Another section</h3>
    <p>This is fifth paragraph.</p>  
  </body>
</html>

3. In the following script, when user clicks on the button, we select the first paragraph and add the class names "highlite bold" to the element.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#action").click(function() {
          // Select the first paragraph
          var elements = $("p:first");
    
          // Add class names to the element
          elements.addClass("highlite bold");
        });
      });
    </script>
    <style>
      .highlite {
        background: yellow;
      }
      .bold {
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h2>Hello User!</h2>
    <input type="submit" id="action" value="Click Me"></input>
    <p>This is a paragraph.</p>
    <p>This is second paragraph.</p>
    <p>This is third paragraph.</p>
    <p>This is fourth paragraph.</p>
    <h2>Another section</h3>
    <p>This is fifth paragraph.</p>  
  </body>
</html>

JavaScript Code