# .prependTo()

## prependTo ( target ) Returns: jQuery version added: 1.0

- target
  Type:
  A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements will be inserted at the beginning of the element(s) specified by this parameter.

Description: Insert every element in the set of matched elements to the beginning of the target.

The `.prepend()` and `.prependTo()` methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With `.prepend()`, the selector expression preceding the method is the container into which the content is inserted. With `.prependTo()`, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

Consider the following HTML:

    <h2>Greetings</h2>
    <div class="container">
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>

We can create content and insert it into several elements at once:

    $( "<p>Test</p>" ).prependTo( ".inner" );

Each inner `<div>` element gets this new content:

    <h2>Greetings</h2>
    <div class="container">
      <div class="inner">
        <p>Test</p>
        Hello
      </div>
      <div class="inner">
        <p>Test</p>
        Goodbye
      </div>
    </div>

We can also select an element on the page and insert it into another:

    $( "h2" ).prependTo( $( ".container" ) );

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):

    <div class="container">
      <h2>Greetings</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>

If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.

## Examples:

#### Example: Prepend all spans to the element with the ID "foo" (Check .prepend() documentation for more examples)

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        background: yellow;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

    <div id="foo">FOO!</div>
    <span>I have something to say... </span>

    <script>

    $( "span" ).prependTo( "#foo" );

    </script>

    </body>
    </html>

#### Demo: