jQuery before() Method

Last Updated : 11 Jul, 2025

The before() Method in jQuery is used to add the content before the selected element.

Syntax:

$(selector).before( content, function(index) )

Parameters: This method accepts two parameters as mentioned above and described below:

content: This parameter holds the content to be inserted before the element. The possible value of content can be HTML Elements, DOM Elements, jQuery Elements.
function(index): It is an optional parameter and is used to specify a function that returns the content to insert before the element and the index returns the index positioning of the element.

Example 1: This example inserts the content before the element.

HTML

<!DOCTYPE html> <html> <head> <title> jQuery before() Method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <!-- Script to insert element before button element --> <script>  $(document).ready(function () {  $("button").click(function () {  $("button").before("<p>GeeksforGeeks:"  + " A computer science portal</p>");  });  });  </script> </head> <body> <button> Click Here to Insert element before button </button> </body> </html>

Output:

Example 2: This example inserts content before the specified element.

HTML

<!DOCTYPE html> <html> <head> <title> jQuery before() Method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <!-- Script to add content before the element --> <script>  $(document).ready(function () {  $("button").click(function () {  $("span").before("<span>GeeksforGeeks: </span>");  });  });  </script> </head> <body> <span>A computer science portal for geek</span><br> <span>A computer science portal for geek</span><br> <span>A computer science portal for geek</span><br> <button>Click to insert</button> </body> </html>