Next »
104/185
« Previous

.prependTo()

In this chapter you will learn:

  1. Syntax and Description for .prependTo()

Syntax and Description

.prependTo(target)

Insert every element in the set of matched elements at the beginning of the target. target is a selector, element, HTML string, or jQuery object; the matched set of elements will be inserted at the beginning of the selected element(s). Its return value is the jQuery object, for chaining purposes.

Consider the following HTML code:

<h2>Header</h2>
<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>

We can create content and insert it into several elements.

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

The result would be:

<h2>Header</h2>/*from   j  a  v a 2s .  c  om*/
<div class="container">
 <div class="inner">
 <p>Test</p>
 Hello
 </div>
 <div class="inner">
 <p>Test</p>
 InnerText
 </div>
</div>

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

Next chapter...

What you will learn in the next chapter:

  1. Syntax and Description for .prev()
  2. Get the previous element and set style
  3. Set the previous element in click event handler
Next »
« Previous