jQuery insertBefore() method

The jQuery insertBefore() method is used to insert additional contents before the selected elements. It is an inbuilt method in jQuery. It is similar to the jQuery before() method. The main difference between before() and insertBefore() is in syntax and placement of the content and target.

We can use the insertAfter() method to insert the content after the selected elements.

Syntax

The content and target mentioned in the above syntax are defined as follows.

content: It is the mandatory selected element. It specifies the content to be inserted before the specified target. If we use the existing element as the content, the existing element will move from its current position and insert before the target elements.

target: It is the mandatory parameter. It specifies the target, where the content is to be inserted.

Let's see some illustrations to understand the working of the insertBefore() method.

Example1

In this example, the insertBefore() method will insert the specified content before the paragraph elements.

<html>

<head>
<title> jQuery insertBefore() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
 $("<span> <b> Hello javatpoint.com </b> </span>").insertBefore("p").css("color","red");  
});
});
</script>
</head>

<body>
<h3> It is an example of using the jQuery insertBefore() method </h3>
<h4> Click the following button to insert the element before the given paragraphs. </h4>
<button> Click me </button><br><br>
<p>This is a tutorial website.</p>  
<p>This is a training institute.</p>  
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we are using the insertBefore() method to place the existing content before the selected element. Here, there is a p element, which is originally placed after the div element. We are using the p as the content, and the div as the target element, so after clicking the given button, the paragraph element will move from its current position and insert before the specified div element.

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("p").insertBefore("div").css("color","red");  
    });  
});  
</script>  
</head>  
<body>  
<h3> It is an example of using the jQuery insertBefore() method </h3>
<h4> Click the following button to see the effect. </h4>
<button> Click me </button></br> </br>

<div> This is a tutorial website. </div>  
<p> Welcome to the javaTpoint.com </p> 
</body>  
</html>

Test it Now

Output

After the execution of the above code, the output will be -