jQuery insertBefore() Method

jQuery | insertBefore() Method: Learn about the jQuery insertBefore() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 18, 2022

insertBefore() Method

Sometimes it is necessary to access a particular element on the web page. Not only that, at times there is a need to add, remove, or manipulated the text and the content using jQuery. When we need to add some content or text to an HTML document, there are various methods for it using jQuery. One of them is - insertBefore() method. This method is a lot similar to the before() in jQuery since this method also helps you to add the content right before the selected element. The content that has to be added can be specified over here. The major difference between the before() and insertBefore() method is the different syntax of both. Here, unlike before(), the content has to be specified before the following comes to the selector.

insertBefore() Method Syntax

$('content').insertBefore('selector');

The element is selected using the selector. The content is the text or data that you wish to provide over there. When the content is specified within the insertBefore() method, then it can have any HTML tag, CSS properties, jQuery objects, and DOM elements in it.
Hence, this method is useful to add any type of content before the targeted location. It will add the specified content before all the matched elements with the selector.

The below-provided example will help to understand the implementation of the insertBefore() method more easily. The content gets added as many times as the button is clicked.

jQuery insertBefore() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  
  <body>
    <h2>jQuery - InsertBefore</h2>
    <p>Click the following button to insert some text before the selected content.</p>
    <button>InsertBefore</button>
    <hr>
    <h3>Thank You !!!</h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('<h3 style="color: teal">Welcome to Include Help</h3>').insertBefore('h3');
        })
    });    
  </script>
</html>

Output:

jQuery removeAttr() Method

jQuery offsetParent() Method

Comments and Discussions!

Load comments ↻