.before()

Syntax

.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

The jQuery object, for chaining purposes.

Description

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

Examples

Consider the following HTML code:

 
<div class="container">
 <h2>Header</h2>
 <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>
 <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>
<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>

Add tag 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").before("<b>Hello</b>");
        });
    </script>
  </head>
  <body>
    <body>
         <b>b</b>
         <p>p</p>
  </body>
</html>

Click to view the demo

Add text node 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").before( document.createTextNode("Hello") );

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

Click to view the demo

Insert content before each of the matched elements.

 
<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").before( $("b") );
        });
    </script>
  </head>
  <body>
    <body>
         <b>asdf</b>
         <p>asdf: </p>
    </body>
</html>

Click to view the demo

Inserts some HTML before all paragraphs.

 
<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").before("<b>Hello</b>");
        });
    </script>
  </head>
  <body>
    <body>
         <b>asdf</b>
         <p>asdf: </p>
    </body>
</html>

Click to view the demo

Inserts a DOM element before all paragraphs.

 
<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").before( document.createTextNode("Hello") );
        });
    </script>
  </head>
  <body>
    <body>
         <b>asdf</b>
         <p>asdf: </p>
    </body>
</html>

Click to view the demo

Add before and after

 
<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')
      .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>
       asdf
     </p>
  </body>
</html>

Click to view the demo