.append() JQ Home  <<  Manipulation  <<  .append()

DOM insertion inside.

Description

The .append() method is used to insert parameter specified content, to the end of each element in the matched set.

  • The .append() method inserts the specified content as the 'last child' of each element in the matched set.
  • Use the .prepend() method to insert the specified content as the 'first child' of each element in the matched set.
  • The .append() 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 .append() 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 .append() and .appendTo() methods perform the same tasks but using different syntax:
    • When using the .append() method the selector expression preceding the method is the container into which the content is inserted.
    • When using the .appendTo() 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.

Syntax

Signature Description
.append( content [, moreContent] )Insert a DOM element, HTML string, or jQuery object at the end of each element in the matched set.
.append( function(index, html) )A function that returns a DOM element(s), HTML string, or jQuery object to insert at the end of each element in the matched set.

Parameters

Parameter Description Type
contentA DOM element, HTML string, or jQuery object to insert at the end of each element in the matched set.Element,
HTMLstring or
jQuery
moreContentOne or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert at the end of each element in the matched set. Element,
Array,
HTMLstring or
jQuery
function(index, html)A function.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The existing value of the old HTML for the element is also passed.
  • The callback is fired in the context of the current element in the set, so the keyword this refers to that element.
 Function

Return

A jQuery object.

.append( content [, moreContent] ) Example  Manip.  <<  Top

A DOM element, HTML string, or jQuery object to insert at the end of each element in the matched set.

  • The .append( content [, moreContent] ) signature will accept any number of additional parameters.

In the example below when the left button is pressed the first time, we append some text to the 'td' elements within 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 'testtable', table rows 1 and 2 DOM elements. We then select a single target to append these rows to. As stated above in the description when only a single target exists and we are appending existing content, the elements are actually moved and not cloned to the target element. There two table rows are 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 append this row to. As stated above in the description when multiple targets exist and we are appending existing content, the elements are cloned to the target elements. The table row is appended to the bottom of all other tables on the page.

Table1 For Testing The .append( 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 (id of trid3), Table Data 1 Table Row 3 (id of trid3), Table Data 2

Table2 For Testing The .append( 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 


$(function(){
  $('#btn1').one('click', function() {
    $('.testtable td').append('  Appending Some Text!!'); 
  });
  $('#btn2').one('click', function() {
    tableRow1 = document.getElementById('trid1');
    tableRow2 = document.getElementById('trid2');
    $('.testtable2').append(tableRow1, tableRow2); 
  });
  $('#btn3').one('click', function() {
    tableRow3 = document.getElementById('trid3');
    $('table').append(tableRow3); 
  });
});

Press the button below to action the above code:

                            

.append( function(index, html) ) Example  Manip.  <<  Top

A function that returns a DOM element(s), HTML string, or jQuery object to insert at the end of each element in the matched set.

In the example below when you press the button below within the table with a class of 'testtable3', we append some text to each 'td' element within the table.

Table For Testing The .append( function(index, html) ) 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(){
  $('#btn4').one('click', function() {
    $('.testtable3 td').append( function(index, html) {
      return ' Appending Text:' + index;
    }); 
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Intermediate Tutorials - Lesson 2 - DOM Insertion, Inside