Introduction to jQuery join
The jQuery join() method is used to convert and return the elements of an array into a string. The jQuery join() method is a built-in method in jQuery. Sometimes we need to join all the elements of an array into a single string itself, so jQuery provides the join() method for this purpose. While joining the elements, each element will be separated by some separator and comma ( “,” ) is the default separator. Note that the join() method does not change the original array; it just returns the converted array, which we can store into some other variable.
Syntax:
array.join(separator);Parameters:
- separator: This is an optional string type parameter that specifies the character or string which is to be used to join the elements of an array.
Return Value:
The return value of this method is a string of joined array elements with separated by the passed separator.
Working of jQuery join()
- The join() method apply to the array object, and it accepts one parameter that is a separator.
- Suppose an array contains four elements, and we call the join() method on it and pass space as separator, then the join() method combine all the four elements by using space as the separator between them and return as a string.
- If we check the original array, the array will not change because the join does not change to the original array; it just returns a string as a result.
Examples of jQuery join()
Different examples are mentioned below:
Example #1
Example of jQuery join() method to join array elements.
Next, we write the html code of the jQuery join() method more clearly with the following example, where the join() method is used to join a string array elements without any separator.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery join method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script type="text/javascript">
$(document).ready(function () {
$("#id1").click(function() {
var fruits = [ "Apple", "Banana", "Orange", "Mango", "Cherry" ];
$("h3").text(fruits );
});
$("#id2").click(function() {
var fruits = [ "Apple", "Banana", "Orange", "Mango", "Cherry" ];
var jfruits = fruits.join();
$("div").text(jfruits );
});
});
</script>
</head>
<body>
<p> Example for join() method. </p>
<button id = "id1" >Click this button to see all the elements of an array.</button>
<h3> </h3>
<button id = "id2" >Click this button to join all the elements of an array.</button>
<div></div>
</body>
</html>Output:
Once we click on the “Click this button to see all the elements of an array.” Button, the output is:
And once we click on the “Click this button to join all the elements of an array.” Button, the output is:
As in the above program, the array of fruits is created, which gets print by clicking the first button through calling the function. Next, if we click the second button, it calls to the function; in this function, it is creating the same array, which is then joined and printing, as we can see in the output. If we observe the output, both the array are printing same because the array element joins by default using “,”, so the join() method also join all the elements by default by “,” separator if we do not pass any separator.
Example #2
Example of jQuery join() method to join array elements with specified separator.
Next, we write the html code of the jQuery join() method, where the join() method is used to join string array elements with “@” as a separator between the elements.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery join method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script type="text/javascript">
$(document).ready(function () {
$( "#id1" ).click(function() {
var fruits = [ "Apple", "Banana", "Orange", "Mango", "Cherry" ];
$( "#h1" ).text(fruits );
var jfruits = fruits.join( "@" );
$( "div" ).text( jfruits );
$( "#h2" ).text( fruits );
});
});
</script>
</head>
<body>
<p> Example for join() method with separator. </p>
<p> Click below button to see all the elements of an array and join them. </p>
<button id = "id1" >Click me</button>
<p> The original array before join is : </p>
<h3 id = "h1"> </h3>
<p> The new joined array is : </p>
<div> </div>
<p> The original array after join is : </p>
<h3 id = "h2"> </h3>
</body>
</html>Output:
Once we click on the “Click me” button, the output is:
As in the above program, if we click the “Click me” button, it calls to the function; in this function, it is creating the string array, which is then joined by the “@” separator and printing, as we can see in the output. If we observe the output, both the array (array before and after join) is printing the same because the join method does not alter to the original array.
Example #3
Example of jQuery join() method to join number array elements with specified separator.
Next, we write the html code of the jQuery join() method, where the join() method is used to join a number array elements with “ and ” as a separator between the number elements.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery join method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<style>
body{background: red;};
</style>
<script type="text/javascript">
$(document).ready(function () {
$( "#id1" ).click(function() {
var no = [ 14, 20, 34, 43, 51, 60 ];
document.write( "The original array is :" );
document.write( no );
document.write( "<br>" );
document.write( "The joined original array is :" );
document.write( no.join(" and ") );
});
});
</script>
</head>
<body>
<p> Example for join() method on number array. </p>
<p> Click below button to see all the elements of an array and join them. </p>
<button id = "id1" >Click me</button>
</body>
</html>Output:
Once we click on the “Click me” button, the output is:
As in the above program, if we click the “Click me” button, it calls to the function, in this function, it is creating the number array, which is then joined by “ and ” separator and printing, as we can see in the output.
Conclusion
The jQuery join() method is a built-in method in jQuery, which is used to join all the elements of an array by a specific separator.
Recommended Articles
This is a guide to jQuery join. Here we discuss the introduction, working of jQuery join() along with examples, respectively. You may also have a look at the following articles to learn more –
