.prependTo()S2C Home « Manipulation « .prependTo()

• <<    .prepend()
• .text()     >>

DOM insertion inside.

Description

The .prependTo() method is used to insert each element in the matched set to the beginning of the specified content.

• The .prependTo() method inserts the specified content as the 'first child' of each element in the matched set.
• Use the .appendTo() method to insert the specified content as the 'last child' of each element in the matched set.
• The .prependTo() method works slightly differently when the content being appended is an existing element on the page:
  • When there is only one target element the content element will be moved and not cloned.
  • When there is more than one target element the content element will be cloned to the target elements.
    • Using the .prependTo() method this way has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Avoid cloning elements with the id attribute or if absolutely necessary ensure elements that might be cloned are coded using the class attribute identifier instead.
• The .prependTo() and .prepend() methods perform the same tasks but using different syntax:
  • When using the .prependTo() method the content precedes the method, either as a selector expression or as markup created on the fly, and is inserted into the target container.
  • When using the .prepend() method the selector expression preceding the method is the container into which the content is inserted.

Syntax

Parameters

Return

A jQuery object.

.prependTo( target ) ExamplesTop

Insert each element in the matched set to the beginning of the specified content.

In the example below when the left button is pressed the first time, we prepend 'td' elements we created 'on the fly' to each table row within the table with a class of 'testtable2'.

When the centre button is pressed we first create a variable of the table with a class of 'testtable' table row 1 DOM element. We then select a single target to prepend this row to. As stated above in the description when only a single target exists and we are prepending existing content, the elements are actually moved and not cloned to the target element. The table row is moved from the first to second table.

When the right button is pressed the first time, we first create a variable of the table with a class of 'testtable' table row 3 DOM element. We then select multiple targets to prepend this row to. As stated above in the description when multiple targets exist and we are prepending existing content, the elements are cloned to the target elements. The table row is prepended to the top of all other tables on the page.

$(function(){
  $('#btn12').one('click', function() {
    $('<td>Prepended Text</td>').prependTo('.testtable2 tr'); 
  });
  $('#btn13').one('click', function() {
    tableRow1 = document.getElementById('trid1');
    $(tableRow1).prependTo('.testtable2'); 
  });
  $('#btn14').one('click', function() {
    tableRow3 = document.getElementById('trid3');
    $(tableRow3).prependTo('table'); 
  });
});

• <<    .prepend()
• .text()     >>