Skip to content
Related Articles

Related Articles

jQuery | before() Method
  • Last Updated : 19 Feb, 2019
GeeksforGeeks - Summer Carnival Banner

The before() Method in jQuery is used to add 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 optional parameter and used to specify a function that returns the content to insert before the element and index returns the index positioning of element.

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




<!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>     

Before click on the button:

After click on the button:



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




<!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>

Before Click on the button:

After Click on the button:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :