How can i add value to th dynamically using Jquery. I am looking to append the values to th Heading8 and Heading9 after Heading7

<thead>
    <tr>
        <th>Heading1</th>
        <th>Heading2</th>
        <th>Heading3</th>
        <th>Heading4</th>
        <th>Heading5</th>
        <th>Heading6</th>
        <th>Heading7</th>           
    </tr>
</thead>

How can i add value to th dynamically using Jquery. I am looking to append the values to th Heading8 and Heading9 after Heading7

<thead>
    <tr>
        <th>Heading1</th>
        <th>Heading2</th>
        <th>Heading3</th>
        <th>Heading4</th>
        <th>Heading5</th>
        <th>Heading6</th>
        <th>Heading7</th>           
    </tr>
</thead>

• javascript
• jquery
• jquery-ui

• 3 $('thead tr').append( $('<th />', {text : 'Heading8'}) ) – adeneo Commented Sep 17, 2014 at 16:39
• If there re many tables in a page , and If I have to append this only to a specific table, then how can i achieve my requirement. – user3541857 Commented Sep 17, 2014 at 16:58
• Give the table an ID – adeneo Commented Sep 17, 2014 at 17:56

3 Answers 3

Use jQuery append:

//adds new <th> Heading8 after Heading7
$('thead tr').append( $('<th />', {text : 'Heading8'}) )

//adds new <th> Heading9 after Heading8
$('thead tr').append( $('<th />', {text : 'Heading9'}) )

EDIT

Append to a specific table:

<thead>
  <tr id="selectMe">
    <th>Heading1</th>
    <th>Heading2</th>         
  </tr>
</thead>

Then use:

$('#selectMe').append( $('<th />', {text : 'Heading3'}) )

Just add this to jQuery:

$(document).ready( function() {
    $('table thead th:last-child').after('<th>test</th>');
});

Use the following mand:

$('#tableId').append($('<th />', {text : 'Your Text'}))