CODEWITHSUNDEEP
javascriptjquery
Jerielle
Jerielle

Reputation: 7520

How to insert a new element after an element by using the selector

I just want to ask how can I add a new element after a specific element after the button is clicked.

Here's my sample code:

    <table id="table-1" border="1" style="border: 1px solid #ccc; width: 100%">
        <thead>
            <tr>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>    
            </tr>
        </thead>
        <tbody id="no-row">
            <td colspan="5">no content</td>
        </tbody>            
                    
        <tfoot>
            <tr>
                <td colspan="5">footer</td>
            </tr>
        </tfoot>    
    </table>
    <button id="add-row">Add Row</button>

I have this simple jquery:

$('#add-row').on('click', function(){
        var counter = 1;
        var add_row = '<tbody>';
            add_row += '<tr>';
            add_row += '  <td>' + counter + '</td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '</tr>';         
            add_row += '</tbody>';   
        
        $('#table-1 #no-row').remove();
        
        $('#table-1 thead').append(add_row);
                     
        counter++;             
                     
    });

But it just appending it inside the thead.

Here's the fiddle:

http://jsfiddle.net/rochellecanale/gov88ucm/1/

Upvotes: 2

Views: 88

Answers (4)

user4964335
user4964335

Reputation:

You need to use the after keyword. The after keyword Insert content, specified by the parameter, after each element in the set of matched elements.

$('#table-1 thead').after(add_row);

Upvotes: 2

fdomn-m
fdomn-m

Reputation: 28611

Your <tbody> is missing a <tr>

<tbody>
  <tr id="no-row">
    <td colspan="5">no content</td>
  </tr>
</tbody>

change your add_row to remove tbody then append directly to the tbody

$('#table-1 #no-row').remove();
$('#table-1>tbody').append(add_row)

this way, your append function is re-usable as you're currently re-adding the tbody every time.

To answer the question specifically, you can add the ID to tr as above, remove tbody from add_row and add after the no-row:

$('#table-1 #no-row').hide();
$('#table-1 #no-row').after(add_row)

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

append() inserts the specified content within the selected element. To insert it after the element use the after() method instead:

$('#table-1 thead').after(add_row);

Updated fiddle

how can i display the newest added row to the bottom?

You can select the tfoot and use before():

$('#table-1 tfoot').before(add_row);

Example fiddle

Upvotes: 4

Deenadhayalan Manoharan
Deenadhayalan Manoharan

Reputation: 5444

Try this...

Change $('#table-1 thead').append(add_row); to $('#table-1').append(add_row);

var counter = 1;
$('#add-row').on('click', function(){
    var add_row = '<tbody>';
        add_row += '<tr>';
        add_row += '  <td>' + counter + '</td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '</tr>';         
        add_row += '</tbody>';   

    $('#table-1 #no-row').remove();

    $('#table-1').append(add_row);

    counter++;             

});

Upvotes: 2

Related Questions