jQuery before() Method

Quiz

The before() method in jQuery is used to insert content or elements before each element in the selected set of elements.

It accepts a parameter (content), which can be: HTML elements, DOM elements, Arrays of DOM elements, or jQuery objects containing DOM elements.

Note: If we want to insert the content after the selected elements, we need to use the after() method.

Syntax

Following is the syntax of before() method in jQuery −

$(selector).before(content,function(index))

Parameters

This method accepts the following parameters −

content: The content to insert before each selected element. The possible values can be:
HTML elements
DOM elements
jQuery objects
function(index): (optional) A callback function to be executed before the insertion of content.
index: It represents the index position of the current element among the set of matched elements.

Example 1

In the following example, we are demonstrating the basic usage of before() method with HTML element provided as a parameter −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("button").before("<p>New paragraph inserted before the button.</p>");
      });
    });
  </script>
</head>
<body>
<button>Click me</button>
</body>
</html>

After clicking the button, this method will insert the provided paragraph element immediately before the button.

Example 2

In this example, we're using DOM methods to create a new paragraph element, and then we're inserting it before the button −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        // Creating a new paragraph element
        const newParagraph = document.createElement("p");
        newParagraph.textContent = "New paragraph added!";
        $("button").before(newParagraph);
      });
    });
  </script>
</head>
<body>
<button id="btn">Click me</button>
</body>
</html>

After executing the above program, it inserts the provided paragraph element immediately before the button.

Example 3

Here, we are creating a jQuery object representing a new paragraph element, and then inserts it before the button element −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        // Creating a new paragraph jQuery object
        const newParagraph = $("<p>New paragraph added!</p>");
        $("button").before(newParagraph);
      });
    });
  </script>
</head>
<body>
<button id="btn">Click me</button>
</body>
</html>

When we execute the above program, it adds the provided paragraph element immediately before the button.

Example 4

In this example, we are passing a callback function as an argument to the before() method. This function will be executed when before() is called, and it returns the content to be inserted before the button −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("button").before(function(){
          return "<p>New paragraph added!</p>";
        });
      });
    });
  </script>
</head>
<body>
<button id="btn">Click me</button>
</body>
</html>

When we execute the above program, it inserts the provided paragraph immediately before the button.

jquery_ref_html.htm

Print Page