Updated March 24, 2023
Introduction to jQuery before()
The jQuery before() method is used to insert the content before the selected HTML element. This method is a built-in method in jQuery. It performs the same as the jQuery prepend() method which inserts the specified content at the before of the selected Html element, but both are different in their syntax. The reverse of this method is jQuery after() method, which inserts the content at an end of the selected HTML element.
Syntax and Parameters
Let’s see the syntax and parameters of this with the explanation.
Syntax:
$(selector).before(content, function(index))This method inserts the content before the selected HTML element.
Parameters:
- content: It is used to specify the content to be inserted. The content can be HTML element, Dom element, and jQuery object.
- function(index): It is used to specify the name of the function which returns the content to be inert.
- index: It is used to specify the index position of the element in the set.
As in the syntax of the before() method, the method is called on the selected element and content is passed as an argument of the method.
$(selector).before(content)Whereas the syntax of an insertBefore() method is, the method is called on content and the selected element is passed as an argument of the method.
$(content).insertBefore(selector)Examples of jQuery before()
Some of the examples are as follows:
Example #1
This is an example of this method to insert the content as text.
Code:
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "utf-8" >
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery before() method </title>
<!-- code to show the jQuery before( ) working method -->
<script>
$( document).ready( function( ){
$( "button" ).click( function( ){
$( "h1" ).before( "<p> <b> This content is inserted by before method. </b> </p>");
});
});
</script>
</head>
<body>
<h1> This is first heading. </h1>
<h1> This is second heading. </h1>
<button> Click here to Insert content before each h1 element </button>
</body>
</html>Output:
Once we click the button, the output is:
In the above code, the use of this method is to insert specified content at the start or as the first child of the selected elements in this collection.
Example #2
This is the example of this method apply to the div element.
Code:
<!DOCTYPE html>
<html lang = "en" >
<head>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<title> This is an example for jQuery befoer( ) method </title>
<!-- code to show the jQuery before( ) working method -->
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$( "div" ).click(function () {
$(this).before('<div class = "div">This box is inserted by before method</div>' );
});
});
</script>
<style>
.div{ margin : 15px; padding : 15px; border : 3px solid #666; width : 50px; }
</style>
</head>
<body>
<p> Click on any square below to insert the empty box after it : </p>
<div class = "div" style = "background-color: yellow; " > </div>
<div class = "div" style = "background-color: red; " > </div>
<div class = "div" style = "background-color: blue; " > </div>
</body>
</html>Output:
Once we click any of the boxes, the output is:
Example #3
This is the example of this method with the jQuery insertBefore() method.
Code:
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "utf-8" >
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery before( ) method </title>
<!-- code to show the jQuery before( ) working method -->
<script>
$( document).ready( function( ){
$( "button" ).click( function( ){
$("h1").before( "<b><p> This content is inserted by before method. </b> </p>");
$( "<p><b> This content is inserted by insertBefore method. </b> </p>" ).insertBefore ( "h1" );
});
});
</script>
</head>
<body>
<h1> This is first heading. </h1>
<h1> This is second heading. </h1>
<button> Click here to Insert content before each h1 element </button>
</body>
</html>Output:
Once the Click Here button click, the output is:
As we can see in the output, the before() method and the insertBefore() method both performed the same thing but the order of parameters we pass is different.
Conclusion
This method is a built-in method uses to insert the content before the selected HTML element, the same as the prepend() method does. Again the before() method and the insertBefore() method both perform the same thing but the order of parameters they accept is different.
Recommended Articles
This is a guide to jQuery before(). Here we discuss syntax and parameters along with examples and its code implementation. You can also go through our other related articles to learn more –
