.insertAfter() JQ Home  <<  Manipulation  <<  .insertAfter()

DOM insertion outside.

Description

The .insertAfter() method is used to insert the matched set after the specified target.

  • Use the .insertBefore() method to insert the specified content before each element in the matched set.
  • The .insertAfter() method works slightly differently when the content being added 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 moved to the first target element, and then cloned from the first target element to the other target elements.
      • Using the .insertAfter() 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 .insertAfter() and .after() method perform the same tasks but using different syntax:
    • When using the .insertAfter() method the content precedes the method, either as a selector expression or as markup created on the fly, and is inserted after the target container.
    • When using the .after() method, the selector expression preceding the method is the container after which the content is inserted.

Syntax

Signature Description
.insertAfter( target )Insert the matched set after the specified target.

Parameters

Parameter Description Type
targetA DOM element, HTML string, or jQuery object to insert the matched set after.Element,
HTMLstring or
jQuery

Return

A jQuery object.

.insertAfter( target ) Example  Manip.  <<  Top

A DOM element, HTML string, or jQuery object to insert the matched set after.

In the example below when the left button is pressed the first time, we add a 'tr' element with two 'td' elements in it, after the 'tr' element with an id of 'trid3'.

When the centre button is pressed the first time, we first create a variable of the table with a class of 'testtable', table rows 1 DOM element. We then select a single target to add these rows after. As stated above in the description when only a single target exists and we are adding existing content, the elements are moved and not cloned to the target element. The first two table rows in table1 are reversed.

When the right button is pressed the first time, we select the 'p' element with the id of 'addafter'. We then select multiple targets to add this 'p' element to. As stated above in the description when multiple targets exist and we are adding existing content, the elements are moved to the first target element and then cloned from the first target element to the other target elements. So in this case the 'p' element is first moved after the first table on the page and from there cloned after all other tables on the page.

Table1 For Testing The .insertAfter( target ) Signature
Table Row 1 (id of trid1), Table Data 1 Table Row 1 (id of trid1), Table Data 2
Table Row 2 (id of trid2), Table Data 1 Table Row 2 (id of trid2), Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2

Table2 For Testing The .insertAfter( target ) Signature
Table Row 1 (id of trid3), Table Data 1 Table Row 1 (id of trid3), Table Data 2 


$(function(){
  $('#btn9').one('click', function() {
    $('<tr><td>Adding Text!!</td><td>Adding Some Text!!</td></tr>').insertAfter('#trid3'); 
  });
  
  $('#btn10').one('click', function() {
    tableRow1 = document.getElementById('trid1');
    $(tableRow1).insertAfter('#trid2'); 
  });
  
  $('#btn11').one('click', function() {
    aPara = document.getElementById('addafter');
    $(aPara).insertAfter('table'); 
  });
});

Paragraph text with an id of 'addafter' to be added after each table.

Press the button below to action the above code:

                            

Related Tutorials

jQuery Intermediate Tutorials - Lesson 3 - DOM Insertion, Outside