jQuery insertBefore() Method

Quiz

The insertBefore() method in jQuery is used to insert HTML elements before the selected target element(s) in the DOM. This method accepts a parameter named "selector", which specifies the target element(s) before which the content will be inserted.

If we want to insert HTML elements after the selected target elements, we need to use the insertAfter() method.

Syntax

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

$(content).insertBefore(selector)

Parameters

This method accepts the following parameters −

content: The HTML content or elements to be inserted before the target element(s).
selector: The element(s) before which the content will be inserted.

Note: If the content provided is already an existing element, it will be moved from its current position in the DOM and then inserted before the chosen target element(s).

Example 1

In the following example, we are using the insertBefore() method to insert a <p> element before the <div> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("<p>This is a newly inserted paragraph.</p>").insertBefore("div");
  })
});
</script>
</head>
<body>
<div style="border: 2px solid green; width: 10%;">DIV element.</div>
<button>Click here!</button>
</body>
</html>

After executing and clicking the button, the <p> element will be inserted after the <div> element.

Example 2

In the example below, we are inserting an existing element before each selected element (<h2>) −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").insertBefore("h2");
  })
});
</script>
</head>
<body>
<h2>Heading element.</h2>
<h2>Heading element.</h2>
<button>Click here!</button>
<p>This is a paragraph element.</p>
</body>
</html>

When we execute the above program, insertBefore() method inserts the existing <p> element before each <h2> elements.

jquery_ref_html.htm

Print Page