.before()

Syntax and Description

.before(content)
content: An element, an HTML string, or a jQuery object to insert before each matched element
.before(function)
function: A function that returns an HTML string to insert before each matched element

Return value is The jQuery object, for chaining purposes.

Insert content specified by the parameter before each element in the set of matched elements.

Consider the following HTML code:


<div class="container">
 <h2>Header</h2>//from   w  w w .j av a2 s. c o m
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>

Create content and insert it before several elements.


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

The result:


<div class="container">
 <h2>Header</h2>//from w  w  w  .jav a 2 s. c  om
 <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.


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

An element selected will be moved before the target not cloned.


<h2>Header</h2>//www .  j  a v  a2 s .  c om
<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>

Add tag before

Add tag before


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w w  w . j  av  a2 s .  co m-->
            $("p").before("<b>Hello</b>");
        });
    </script>
  </head>
  <body>
    <body>
         <b>b</b>
         <p>p</p>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.before()

Add text node before

Add text node before


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--  w  w  w. j a  v  a  2  s  .c om-->
            $("p").before( document.createTextNode("Hello") );

        });
    </script>
  </head>
  <body>
    <body>
         <b>b</b>
         <p>p</p>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.before()

Insert content before each of the matched elements


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- w  ww  . j a  va  2  s .c  o  m-->
          $("p").before( $("b") );
        });
    </script>
  </head>
  <body>
    <body>
         <b>java2s.com</b>
         <p>java2s.com: </p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.before()

Inserts some HTML before all paragraphs


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   ww w  .ja v  a  2  s. c  om-->
          $("p").before("<b>Hello</b>");
        });
    </script>
  </head>
  <body>
    <body>
         <b>java2s.com</b>
         <p>java2s.com: </p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.before()

Inserts a DOM element before all paragraphs


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- ww  w .jav  a2s. c  om-->
          $("p").before( document.createTextNode("Hello") );
        });
    </script>
  </head>
  <body>
    <body>
         <b>java2s.com</b>
         <p>java2s.com: </p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.before()

Add before and after


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type='text/javascript'>
$(document).ready(<!--   w ww .  j a  va 2  s  .co  m-->
  function() {
    $('p')
      .before(
        "<h4>Quotes</h4>"
      )
      .after(
        "<p class='tmpAttribution'>\n" +
        " - after\n" +
        "</p>\n"
      );
  }
);
    </script>
    <style type='text/css'>
p {
    margin: 5px;
}
p.tmpAttribution {
    text-align: right;
}
    </style>
  </head>
  <body>
     <p>
       java2s.com
     </p>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.before()