jQuery | insertBefore() with Examples

The insertBefore() is an inbuilt method in jQuery which is used to insert some HTML content before a specified element. The HTML content will be inserted before each occurrence of the specified element.
Syntax:

$(content).insertBefore(target)

Here content is the HTML content which needs to be inserted before the specified target.
Parameters: It accepts a parameter “target” which is the target before which the content is to be inserted.
Return Type: It doesn’t return any value.

jQuery code to show the working of insertBefore() method:
Code #1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
    <script> 
        $(document).ready(function() { 
            $("div").click(function() { 
                // insertBefore 
                $("<p>You should follow GeeksForGeeks</p>").insertBefore("p"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
  
    <p>To learn jQuery </p> 
  
    <div>Click here to complete</div> 
  
</body> 
  
</html> 

Output:
Before clicking the div content-

To learn jQuery
Click here to complete

After clicking the div content-

You should follow GeeksForGeeks
To learn jQuery 
Click here to complete

Code #2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
    <script> 
        $(document).ready(function() { 
            $("div").click(function() { 
                // insertBefore 
                $("<p>You should follow GeeksForGeeks</p>").insertBefore("p"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
  
    <p>To learn jQuery </p> 
  
    <p> To learn coding </p> 
  
    <div>Click here to complete</div> 
  
</body> 
  
</html> 

Output:
Before clicking the div content-

To learn jQuery 
To learn coding 
Click here to complete

After clicking the div content-

You should follow GeeksForGeeks
To learn jQuery 
You should follow GeeksForGeeks
To learn coding
Click here to complete

jQuery | insertBefore() with Examples

tags:

You Might Also Like

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books