.html() JQ Home  <<  A & P  <<  .html()

First element HTML retrieval and matched set HTML setting.

Description

The .html() method is used to retrieve the HTML contents from the first element within the matched set, or set the HTML content of each element within the matched set.

  • The .html() method is not available on XML documents unlike the .text() method which is available on both HTML and XML documents.
  • Uses the browser's innerHTML property.
  • When setting an element's content using the .html( htmlString ) signature, existing content is replaced by the new content.
  • When setting an element's content using the .html( function(index, oldhtml) ) signature, the existing element is cleared before the function is called. So use the oldhtml argument to reference the previous content.

Syntax

Signature Description
.html() Retrieve the HTML contents from the first element within the matched set.
.html( htmlString ) Set the HTML contents of each element within the matched set.
.html( function(index, oldhtml) )A function returning the HTML contents to set.

Parameters

Parameter Description Type
htmlStringA string of raw HTML.HTMLstring
function(index, oldhtml)A function.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The existing html pertaining to the current 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

Retrieving - A String object.

Setting - A jQuery object including the updated HTML within the matched set.

.html() Example A & P  <<  Top

Retrieve the HTML contents from the first element within the matched set.

In the example below when we press the button we get the HTML contents of the table below which has an id of 'table1' and display them in an alert box.

Table For Testing The .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(){
  $('#btn5').on('click', function() {
    alert($('#table1').html());
  });
});

Press the button below to action the above code:

.html( htmlString ) Example A & P  <<  Top

Set the HTML contents of each element within the matched set.

In the example below when we press the button we select all 'td' elements within the table with an id of 'testtable2'. We then change the text within each 'td' element..

Table For Testing The .html( htmlString ) 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(){
  $('#btn6').on('click', function() {
    $('.testtable2 td').html('Table data changed');
  });
});

Press the button below to action the above code:

.html( function(index, oldhtml) ) Example A & P  <<  Top

A function returning the HTML contents to set.

In the example below when we press the button the first time we add a new 'td' element to each table row.

Table For Testing The .html( function(index, oldhtml) ) Signature
?
? 


$(function(){
  $('#btn7').one('click', function() {
    $('.testtable3 tr').html( function(index, oldhtml) {
      var newhtml = oldhtml + '<td>' + index + '</td>';
      return newhtml;
    });
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 9 - Working With CSS Attributes