Skip to content
Related Articles

Related Articles

jQuery before() Method

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 27 Oct, 2022
Improve Article
Save Article

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=
    </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=
    </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>


Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!