.prepend()

Syntax

.prepend(content): content: An element, an HTML string, or a jQuery object to insert at the beginning of each element in the set of matched elements
.prepend(function): function: A function that returns an HTML string to insert at the beginning of each element in the set of matched elements

Return value

The jQuery object, for chaining purposes.

Description

Insert content at the beginning of each element in the matched elements.

Examples

Add data to each tag with prepend

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("*", document.body).each(function () {
                  $(this).prepend(document.createTextNode("data"));

             });
        });
    </script>
    <style>
      .y { background:yellow; }
  </style>

  </head>
  <body>
    <body>
       <div><button disabled="disabled">First</button> <span class="selected"></span>
            <span></span>
       </div>

  </body>
</html>

Click to view the demo

Prepend content to the inside of every matched element

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("span").prepend("<b>Hello </b>");
        });
    </script>
  </head>
  <body>
    <body>
        <span>span</span>
        <div id="foo">FOO!</div>
  </body>
</html>

Click to view the demo

Prepend and query

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

Click to view the demo

Prepends a DOM Element

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("span").prepend(document.createTextNode("Hello "));
        });
    </script>
  </head>
  <body>
    <body>
        <span>span</span>
        <div id="foo">FOO!</div>
    </body>
</html>

Click to view the demo