Question

below is my html

<table id="myTable" class="dropdown">
 <thead> ........... </thead>
 <tbody class="myTbody1">
            <!--     insert here       -->
 <tbody class="myTbody2">
 <tbody class="myTbody3">
</table>

I need to insert the below html string right after the tbody, myTbody1

var html = '<tbody class="details" colspan="9">
<table>
    <thead> 
        <tr>
            <th> Col1 </th>     
            <th> Col2 </th>     
            <th> Col3 </th>     
            <th> Col4 </th>     
            <th> Col5 </th>     
            <th> Col6 </th>     
            <th> Col7 </th>     
            <th> Col8 </th>     
            <th> Col9 </th> 
        </tr>
    </thead>    
    <tbody class="head">    
        <tr class="nestedRow">              
            <td> Data</td>      
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
        </tr>
    </tbody>
</table>
</tbody>'

I tried to do like below and it inserts at right place but it is cutting the first two tags tbody and table from the html string.

$(html).insertAfter($(this));

where $(this) equals tbody.myTbody1

Any help is appreciated.

Answer 1

As specified, tbody can only contain tr elements. Since the HTML you’re passing is invalid jQuery just works with the valid portion that’s created in the DOM.

To make a nested table like that you’ll have to add a tr and td element as children of the tbody and put the inner table inside the td.