.insertBefore()

Syntax

.insertBefore(target)

Parameters

target: A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted before the element(s).

Return value

The jQuery object, for chaining purposes.

Description

Insert every element in the set of matched elements before the target.

Examples

Consider the following HTML code:

 
<div class="container">
 <h2>Header</h2>
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>

Apply

 
$('<p>Test</p>').insertBefore('.inner');

The results:

 
<div class="container">
 <h2>Header</h2>
 <p>Test</p>
 <div class="inner">Hello</div>
 <p>Test</p>
 <div class="inner">InnerText</div>
</div>

Select an element on the page and insert it before another.


$('h2').insertBefore($('.container'));

Results:

 
<h2>Header</h2>
<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>

Insert query before

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p").insertBefore("#foo");

        });
    </script>
  </head>
  <body>
    <body>
         <p>a</p><div id="foo">b</div>

  </body>
</html>

Click to view the demo

The reverse of $(A).before(B)

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("p").insertBefore( $("b") );
        });
    </script>
  </head>
  <body>
    <body>
         <b>asdf</b>
         <p>asdf: </p>
    </body>
</html>

Click to view the demo