Outer DOM InsertionS2C Home « Outer DOM Insertion

In our second look at DOM manipulation we investigate the outer DOM insertion methods.

The jQuery outer DOM insertion methods allow us to insert content before or after each element within the matched set or insert each element of the matched set before or after the specified target.


Outer DOM Insertion Methods Description
.after()Insert parameter specified content, after each element in the matched set.
.before()Insert parameter specified content, before each element in the matched set.
.insertAfter()Insert the matched set after the specified target.
.insertBefore()Insert the matched set before the specified target.

The .after() Method go to top of page Top

Insert parameter specified content, after each element in the matched set.

We will be using the .after( function(index) ) signature for our example which calls a function that returns a DOM element(s), HTML string, or jQuery object to insert after each element in the matched set.

The second signature .after( content [, moreContent] ) inserts a DOM element, HTML string, or jQuery object after each element in the matched set.

Examples of both signatures are available in the reference section.

In the example below when you press the button the first time, we add some HTML after each 'td' element within the table with a class of 'testtable'.

Table For Testing The .after( function(index) ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2


$(function(){
  $('#btn1').one('click', function() {
    $('.testtable td').after( function(index, html) {
      return '<td>  Adding Text:' + index + ' </td>';
    }); 
  });
});

Press the button below to action the above code:


The .before() Method go to top of page Top

Insert parameter specified content, before each element in the matched set.

We will be using the .before( content [, moreContent] ) signature for our example which inserts a DOM element, HTML string, or jQuery object before each element in the matched set.

The second signature .before( function(index) ) signature for our example which calls a function that returns a DOM element(s), HTML string, or jQuery object to insert before each element in the matched set.

Examples of both signatures are available in the reference section.

In the example below when the left button is pressed the first time, we add a 'tr' element with two 'td' elements in it, before each table row in the table with a class of 'testtable'.

When the centre button is pressed the first time, we first create two variables of the table with a class of 'testtable2', table rows 1 and 2 DOM elements. 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. These two table rows are moved from the first to second table.

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 to before the first table on the page and from there cloned before all other tables on the page.

Table1 For Testing The .before( content [, moreContent] ) 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 .before( content [, moreContent] ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3 (id of trid3), Table Data 1 Table Row 3 (id of trid3), Table Data 2


$(function(){
  $('#btn2').one('click', function() {
    $('.testtable2 tr').before('<tr><td>Adding Text!!</td><td>Adding Some Text!!</td></tr>'); 
  });
  $('#btn3').one('click', function() {
    tableRow1 = document.getElementById('trid1');
    tableRow2 = document.getElementById('trid2');
    $('#trid3').before(tableRow1, tableRow2); 
  });
  $('#btn4').one('click', function() {
    $('table').before('<p>Adding para text after each table entry!!</p>'); 
  });
});

Paragraph text with an id of 'addbefore' to be added before each table.

Press the button below to action the above code:

                            


The .insertAfter() Method go to top of page Top

Insert the matched set after the specified target.

We use this methods only signature .insertAfter( target ) in the examples below.

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 'trid6'.

When the centre button is pressed the first time, we first create a variable of the table with a class of 'testtable4', 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 trid4), Table Data 1 Table Row 1 (id of trid4), Table Data 2
Table Row 2 (id of trid5), Table Data 1 Table Row 2 (id of trid5), 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 trid6), Table Data 1 Table Row 1 (id of trid6), Table Data 2


$(function(){
  $('#btn5').one('click', function() {
    $('<tr><td>Adding Text!!</td><td>Adding Some Text!!</td></tr>').insertAfter('#trid6'); 
  });
  $('#btn6').one('click', function() {
    tableRow1 = document.getElementById('trid4');
    $(tableRow1).insertAfter('#trid5'); 
  });
  $('#btn7').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:

                            


The .insertBefore() Method go to top of page Top

Insert the matched set before the specified target.

This methods only signature .insertBefore( target ) has examples in the reference section.

Lesson 3 Complete

In this lesson we investigated the outer DOM insertion methods which allow us to insert new content outside an existing element.

Related Tutorials

jQuery 1.10 Intermediate - Lesson 2: Inner DOM Insertion
jQuery 1.10 Intermediate - Lesson 4: Wrapped DOM Insertion
jQuery 1.10 Intermediate - Lesson 5: DOM Removal & Replacement

What's Next?

In our third look at manipulating the DOM using jQuery we look at wrapped DOM insertion.

go to home page Homepage go to top of page Top