.before()

In this chapter you will learn:

Syntax and Description for .before()
Add tag before
Add text node before
Insert content before each of the matched elements
Inserts some HTML before all paragraphs
Inserts a DOM element before all paragraphs
Add before and after

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>
 <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">/*from   java2  s .  c o m*/
 <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

Add text node before

<html><!-- j  a  v a 2 s .c o  m-->
  <head>
    <script src="http://java2s.com/style/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><!--from   j ava2  s  .  c  om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("p").before( $("b") );
        });
    </script>
  </head>
  <body>
    <body>
         <b>java2s.com</b>
         <p>java2s.com: </p>
    </body>
</html>

Click to view the demo

Inserts some HTML before all paragraphs

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

Click to view the demo

Inserts a DOM element before all paragraphs

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

Click to view the demo

Add before and after

<html><!-- ja  va2s.c  o  m-->
  <head>
    <script src="http://java2s.com/style/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>
       java2s.com
     </p>
  </body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter: