How to append in table in JQuery?

Question

Can you please tell me how to how to append contend to a table? I want to append my content after first row. Here is my fiddle:

In this i am appending in this div

$('#test  ').html(buildNav(testData.testCaseList)).trigger('create');

I don't want this. I will remove that div and uncomment that table.

What should I write in that line so that it appends after the row of table?

$('#test  ').html(buildNav(testData.testCaseList)).trigger('create');

Answer 1

Try something like that

HTML

<table>    
     <tr>
           <td>ONE</td>
     </tr>
<table>

Appending

$('table').append('<tr><td>TWO</td></tr>'); //And so on...

Answer 2

For some reason, the create event prepends the #test div to the table instead of appending it. I solved it creating a tbody with an ID, and appending to it when creating new tests.

HTML

<div class="parallelTestCases">
    <table id="table_parallelTestCases" width="100%" border="1">
        <thead>
            <tr>
                <td>
                    <a  href="javascript:createParallelTestCases()" data-icon="plus" data-role="button" data-mini="true" data-theme="a">Add Test Case</a>
                </td>
                <td>
                    <select onchange="changeTestSuiteFlip(this)">
                        <option value="SEQUENCE">Sequential</option>
                        <option value="PARALLEL">Parallel</option>
                    </select>
                </td>
            </tr>
        </thead>
        <tbody id="tabletbody">
            <div id="test"></div>
        </tbody>
    </table>
</div>

JS, createParallelTestCases function

createParallelTestCases=function() {
    $('#test').html(buildNav(testData.testCaseList)).trigger('create');
    $('#test').appendTo('#tabletbody');
};

Answer 3

To append to <table> after first row, you can use:

$('table tr:first').after('<tr><td></td></tr>');

If you are sure you have <tbody> tag inside, you can use the code below.

Please note that there will always be a <tbody> in the DOM but only if there is at least one row. If you have no rows, there will be no <tbody> unless you have specified one yourself. So my advice is - make sure specified always <tbody> and then use this code:

$('table > tbody:first').append('<tr><td></td></tr>');

You can include anything within the after() method as long as it's valid HTML.