jQuery insertBefore() Method

Last Updated : 10 Jul, 2023

The insertBefore() is an inbuilt method in jQuery that 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 that 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:

Example 1: In this example, we are using the above-explained method.

html

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

jquery-16

Example 2: Here is another example of jQuery insertBefore() method.

html

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