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 multiple applications of the add function, which are elaborated on below along with illustrations:
- Merging Elements:
The add function is employed to merge elements from diverse origins. It proves beneficial when executing a uniform operation on various elements that correspond to varying selectors.
Examples of combining elements using the add method:
Example 1:
In this instance, we'll append two lists utilizing the add function.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-1 to combine elements using jQuery add() method</title>
<style>
#combineButton {
width: 150px;
height: 50px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 18px;
background-color: brown;
color: wheat;
}
</style>
<script src="https://placehold.co/300x300/3498db/ffffff?text=Sample+Image"></script>
<script>
$(document).ready(function() {
$("#combineButton").click(function() {
var $list1 = $("#list1 li");
var $list2 = $("#list2 li");
var $combinedList = $list1.add($list2);
var $combinedList =
$("#combinedList").empty().append($combinedList);
});
});
</script>
</head>
<body>
<h1>Combining two lists using jQuery add() method</h1>
<h2>Electrical Appliances:</h2>
<ul id="list1">
<li>Air Conditioner</li>
<li>Microwave Oven</li>
<li>Washing Machine</li>
</ul>
<h2>Household Items</h2>
<ul id="list2">
<li>Coffe Maker</li>
<li>Bookshelf</li>
<li>Chairs</li>
</ul>
<button id="combineButton">Combine Items</button>
<h2>Combined Items:</h2>
<ul id="combinedList">
</ul>
</body>
</html>
Output:
Prior to selecting the "Merge items" option, the display will resemble what is depicted below:
Upon selecting the "Merge items" button, you will observe that the two lists have been unified.
Example 2:
In this instance, we are going to merge two sets of paragraphs by utilizing the jQuery add function.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-2 to combine elements using jQuery add() method</title>
<style>
#combineButton {
width: 150px;
height: 45px;
font-size: 15px;
background-color: aqua;
}
</style>
<script src="https://placehold.co/300x300/3498db/ffffff?text=Sample+Image"></script>
<script>
$(document).ready(function() {
$("#combineButton").click(function() {
var $set1 = $("h2:contains('Set 1') + p");
var $set2 = $("h2:contains('Set 2') + p");
var $combinedParagraphs = $set1.add($set2);
$("#combinedParagraphs").empty().append($combinedParagraphs);
});
});
</script>
</head>
<body>
<h1>Combining two sets of paragraphs using jQuery add() method</h1>
<h2>Set 1:</h2>
<p>Hello</p>
<p>there! </p>
<h2>Set 2:</h2>
<p>Welcome to C# Programming.</p>
<p>A tutorial website.</p>
<button id="combineButton">Combine Paragraphs</button>
<h2>Combined Paragraphs:</h2>
<div id="combinedParagraphs">
</div>
</body>
</html>
Output:
Before selecting the "Merge button," the result will appear as shown below:
After selecting the "Merge button", you will observe that the two paragraphs have been consolidated.
- Integrating Additional Elements
The add function appends additional items to a selection that already exists.
Examples of appending a fresh element to a current selection by utilizing the jQuery add function:
Example 1:
In this instance, we'll introduce a fresh element by employing the add function.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-1 of jQuery add() Method</title>
<style>
p {
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
color: maroon;
}
#add {
width: 100px;
height: 50px;
background-color: darkgreen;
color: antiquewhite;
}
</style>
<script src="https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image"></script>
<script>
$(document).ready(function() {
var $element1 = $("<p>Element 1</p>");
$("#add").click(function() {
var $newElement = $("<p>New Element</p>");
$("#container").append($newElement);
$element1 = $element1.add($newElement);
});
});
</script>
</head>
<body>
<h1>Example-1 to add a new element using the jQuery add() method</h1>
<h2>Click on the "Add Element" button to add a new element</h2>
<button id="add">Add Element</button>
<div id="container">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
</body>
</html>
Output:
Prior to selecting the "Add Element" button, the display will resemble the example shown below:
A fresh element is included upon clicking the "Add Element" button.
Example 2:
In this instance, we are going to insert a fresh container by employing the add function.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-2 to add a new box using jQuery add() method</title>
<style>
.box {
width: 150px;
height: 150px;
text-align: center;
margin: 15px;
}
.box1 {
background-color: #0a8714;
color: white;
}
.box2 {
background-color: #83290b;
color: white;
}
.box3 {
background-color: #8b097e;
color: white;
}
#addButton {
width: 175px;
height: 40px;
background-color: yellow;
}
</style>
<script src="https://placehold.co/300x300/3498db/ffffff?text=Sample+Image"></script>
<script>
$(document).ready(function() {
$("#addButton").click(function() {
var $newBox = $("<div class='box box3'>New Box</div>");
$(".box").add($newBox).appendTo("body");
});
});
</script>
</head>
<body>
<h1>Example-2 to add a new box using the jQuery add() method</h1>
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<button id="addButton">Add New Box</button>
</body>
</html>
Output:
Prior to selecting the "Add New Box" button, the display will appear as illustrated below:
A fresh container is generated upon clicking the "Create New Container" button.
It is utilized to generate a brand new collection of elements.
Examples of generating a fresh set by employing the jQuery add function:
Example 1:
In this instance, we are going to generate a fresh series of containers utilizing the add function.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creating a new set using jQuery add() method</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
text-align: center;
}
.box1 {
background-color: #69d2f8;
}
.box2 {
background-color: #c475e8;
}
#setButton {
width: 125px;
height: 35px;
background-color: black;
color: yellow;
}
</style>
<script src="https://placehold.co/300x300/3498db/ffffff?text=Sample+Image"></script>
<script>
$(document).ready(function() {
$("#setButton").click(function() {
var set1 = $(".box1");
var set2 = $(".box2");
var newSet = set1.add(set2);
newSet.css({
"background-color": "pink",
"color": "white"
});
});
});
</script>
</head>
<body>
<h1>Creating a new set using jQuery add() method</h1>
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<button id="setButton">Create New Set</button>
</body>
</html>
Output:
Prior to selecting the "Generate New Collection" option, the display will appear as depicted below:
A fresh set is generated upon clicking the "Generate New Set" button.
JQuery CSS
Within jQuery, the css function serves as a potent resource for developers to dynamically alter CSS attributes.
The css function within jQuery allows for the manipulation of single or multiple CSS attributes belonging to the designated HTML elements.
Syntax of jQuery css method:
$(selector).css(property, value);
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 instance, we are going to modify the background of the <div> element by utilizing the css function.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-1 of jQuery css() method</title>
<style>
div {
width: 350px;
height: 170px;
background-color: rgb(181, 90, 206);
text-align: center;
font-size: 36px;
color: white;
}
button {
width: 100px;
height: 50px;
font-size: 18px;
background-color: aquamarine;
color: rgb(8, 8, 116);
}
</style>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<script>
$(document).ready(function(){
$("#change-color").click(function(){
$("#target").css("background-color", "maroon");
});
});
</script>
</head>
<body>
<h1>Example-1 of jQuery css() method</h1>
<h2>Changing the Background Color of the <div> Element on Button Click</h2>
<div id="target"> Click the button below to change the background color of this element. </div> <br>
<button id="change-color">Change Color</button>
</body>
</html>
Output:
You can observe the outcome of the aforementioned code below, which represents the result displayed prior to clicking the button.
The outcome following the button click is displayed underneath:
Example 2:
In this instance, we are going to modify the text color of the <p> element. We will assign various colors to the text using the CSS function.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-2 of jQuery css() method</title>
<style>
button {
width: 100px;
height: 28px;
font-size: 15px;
background-color: rgb(125, 191, 229);
color: rgb(248, 248, 253);
}
div {
width: 425px;
padding: 50px;
border: solid;
}
</style>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<script>
$(document).ready(function() {
$("#change-color").click(function() {
var randomColor = getRandomColor();
$("#textToChange").css("color", randomColor);
});
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
});
</script>
</head>
<body>
<h1>Example-2 of jQuery css() method</h1>
<h2>Changing the Text Color of the <p> Element on Button Click</h2>
<div>
<p id="textToChange">Click the button below to change the text color of this element.</p>
</div> <br>
<button id="change-color">Change Color</button>
</body>
</html>
Output:
You can observe the outcome of the aforementioned code underneath, which displays the result prior to clicking the button.
The outcome following the button click is displayed underneath. The color of the text will alternate continuously each time the button is activated.
Example 3:
In this instance, we are going to adjust the text size of the <p> element by employing the css function.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-3 of jQuery css() method</title>
<style>
button {
width: 125px;
height: 50px;
font-size: 15px;
background-color: rgb(252, 248, 177);
color: rgb(93, 93, 164);
}
div {
width: 400px;
padding: 45px;
border: dotted;
}
</style>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<script>
$(document).ready(function(){
$("#changeFontSize").click(function(){
$("p").css("font-size", "+=6px");
});
});
</script>
</head>
<body>
<h1>Example-3 of jQuery css() method</h1>
<h2>Changing the Font Size of the <p> Element on Button Click</h2>
<div>
<p id="textToChange">Click the button below to change the font size of this text.</p>
</div> <br>
<button id="changeFontSize">Change Font Size</button>
</body>
</html>
Output:
You can observe the outcome of the aforementioned code displayed below, representing the result prior to clicking the button.
The outcome following the button click is displayed beneath. The text size will progressively enlarge with each button click.
Example 4:
In this instance, we will conceal the content of the <p> element by employing the css function.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-4 of jQuery css() method</title>
<style>
button {
width: 120px;
height: 29px;
font-size: 18px;
background-color: rgb(249, 231, 164);
color: rgb(79, 59, 3);
}
div {
width: 275px;
padding: 40px;
border: dashed;
}
</style>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<script>
$(document).ready(function(){
$("#hideElement").click(function(){
// Hide a div element
$("#hide").css("display", "none");
});
});
</script>
</head>
<body>
<h1>Example-4 of jQuery css() method</h1>
<h2>Hiding the Text of the <p> Element on Button Click</h2>
<div>
<p id="hide">Click the button below to hide this text.</p>
</div> <br>
<button id="hideElement">Hide Element</button>
</body>
</html>ś
Output:
You can observe the outcome of the preceding code below, which represents the result displayed prior to pressing the button.
The outcome following the button click is displayed underneath. The content will be concealed upon clicking the button.
Example 5:
In this instance, we will apply various CSS attributes to the <div> element utilizing the css function.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-5 of jQuery css() method</title>
<style>
button {
width: 150px;
height: 36px;
font-size: 18px;
background-color: rgb(153, 11, 101);
color: rgb(239, 245, 159);
}
div {
width: 425px;
padding: 50px;
border: solid;
}
</style>
<script src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image"></script>
<script>
$(document).ready(function(){
$("#styleButton").click(function(){
$("#styledElement").css({
"background-color": "yellow",
"color": "maroon",
"font-size": "18px"
});
});
});
</script>
</head>
<body>
<h1>Example-5 of jQuery css() method</h1>
<h2>Setting Multiple CSS Properties on <div> Element on Button Click</h2>
<div id="styledElement">Click the button below to change this element's background color and text color.</div> <br>
<button id="styleButton">Style Element</button>
</body>
</html>
Output:
You can view the outcome of the preceding code below, displayed prior to clicking the button.
After selecting the button, the outcome will be displayed as depicted underneath.
Conclusion
In this guide, you have grasped the concepts of the jQuery add and css functions through practical illustrations.