DOM Insertion, Outside JQ Home  <<  JQ Intermediate  <<  DOM Insertion, Outside

• <<    DOM Insertion, Inside
• DOM Insertion, Around     >>

In our second look at DOM manipulation we investigate the DOM Insertion, Outside methods.

The jQuery DOM Insertion, Outside 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.

The .after() Method 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'.

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

The .before() Method 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.

$(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.

The .insertAfter() Method 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.

$(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.

The .insertBefore() Method 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 DOM Insertion, Outside methods which allow us to insert new content outside an existing element.

Related Tutorials

jQuery Intermediate - Lesson 2: DOM Insertion, Inside
jQuery Intermediate - Lesson 4: DOM Insertion, Around
jQuery Intermediate - Lesson 5: DOM Removal & Replacement

Reference

Methods

Events - .one() method
Manipulation - .after() method
Manipulation - .before() method
Manipulation - .insertAfter() method
Manipulation - .insertBefore() method

• <<    DOM Insertion, Inside
• DOM Insertion, Around     >>