# .prependTo()

Categories: Manipulation > DOM Insertion, Inside

## .prependTo( target ) Returns: jQuery

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

- #### version added: 1.0.prependTo( target )

  targetA selector, element, HTML string, or jQuery object; the matched set of elements will be inserted at the beginning of the element(s) specified by this parameter.

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 elsewhere, 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.

### Example:

#### Prepends all spans to the element with the ID "foo"

    <!DOCTYPE html>
    <html>
    <head>
      <style>div { background:yellow; }</style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>
      <div id="foo">FOO!</div>

      <span>I have something to say... </span>
    <script>$("span").prependTo("#foo"); // check prepend() examples</script>

    </body>
    </html>

#### Demo: