JQuery Add CSS

jQuery is a famous JavaScript library which is used for web development. It simplifies interacting with HTML documents and makes it easier to manipulate elements and create dynamic web applications.

In jQuery, add() and css() are commonly used to manipulate HTML elements and their styles within a web page.

In this article, we will understand the add() method and css() method in detail with the help of examples.

jQuery add()

It is one of the useful methods in the jQuery toolkit. The .add() method adds elements to the selected set of elements. It lets you combine two or more sets of elements into an existing set. The resulting set will contain all the elements of the original set, along with the newly added elements.

Syntax of jQuery add() method:

$(selector).add(element, context)

From the above syntax:

• $(selector): It represents the jQuery object you want to select.
• Element: It is an additional jQuery object you want to add to the element specified by the selector. You can pass one or more elements, selectors, or jQuery objects as the elements parameter.
• Context: It is an optional parameter. It restricts the search to a specific part of the document.

Uses of Add() Method

There are various uses of the add() method, which are discussed below with examples:

• Combining Elements:

The add() method is used to combine elements from different sources. It is useful when applying the same operation to multiple elements that match different selectors.

Examples of combining elements using the add() method:

Example 1:

In this example, we will add two lists using the add() method.

Code:

Output:

Before clicking the "Combine items" button, the output will look like you can see below:

After clicking the "Combine items" button, you can see that the two lists have been combined.

Example 2:

In this example, we will combine two sets of paragraphs using the jQuery add() method.

Code:

Output:

Before clicking the "Combine button", the output will look like you can see below:

After clicking the "Combine button", you can see that the two paragraphs have been combined.

• Adding New Elements

The add() method adds new elements to an existing selection.

Examples of adding a new element to an existing selection using the jQuery add() method

Example 1:

In this example, we will add a new element using the add() method.

Code:

Output:

Before clicking the "Add Element" button, the output will look like you can see below:

A new element is added when you click the "Add Element" button.

Example 2:

In this example, we will add a new box using the add() method.

Code:

Output:

Before clicking the "Add New Box" button, the output will look like you can see below:

A new box is added when you click the "Add New Box" button.

• Creating a New Set

It is used to create a completely new set of elements.

Examples of creating a new set using the jQuery add() method

Example 1:

In this example, we will create a new set of boxes using the add() method.

Code:

Output:

Before clicking the "Create New Set" button, the output will look like you can see below:

A new set is added when you click the "Create New Set" button.

JQuery CSS()

In jQuery, css() method is a powerful tool in the developer's toolkit to manipulate CSS properties dynamically.

The css() method in jQuery sets or gets one or more CSS properties of the selected HTML elements.

Syntax of jQuery css() method:

From the above syntax:

• Selector: It defines the HTML element to which you want to apply the CSS property.
• Property: It defines the CSS property that you want to set or get.
• Value: It is used to apply the new value to the property for the selected element.

Examples of the jQuery css() method

Example 1:

In this example, we will change the background of the <div> element using the css() method.

Code:

Output:

You can see the result of the above code below, which is the result before clicking the button.

The result after clicking the button is given below:

Example 2:

In this example, we will change the color of the text of the <p> element. We will apply random colors to the text using the CSS () method.

Code:

Output:

You can see the result of the above code below, which is the result before clicking the button.

The result after clicking the button is given below. The text color will repeatedly change when the button is clicked.

Example 3:

In this example, we will change the font size of the <p> element using the css() method.

Code:

Output:

You can see the result of the above code below, which is the result before clicking the button.

The result after clicking the button is given below. The font size will continue to increase upon clicking the button.

Example 4:

In this example, we will hide the text of the <p> element using the css() method.

Code:

Output:

You can see the result of the above code below, which is the result before clicking the button.

The result after clicking the button is given below. The text will be hidden once you click the button.

Example 5:

In this example, we will use multiple CSS properties on the <div> element using the css() method.

Code:

Output:

You can see the result of the above code below, which is the result before clicking the button.

After clicking the button, the result will appear as shown below.

Conclusion

In this article, you have understood the jQuery add() and css() methods with the help of examples.