Question

Given this nth row in a table, can jquery add only the markup to close the table

        <tr class="eop">
            <td> 8/31 </td>
            <td> XYZ </td>
            <td> 2 </td>
            <td> 92.00 </td>
        </tr>

   </tbody>            --
</table>                 |
<table>                  --     //  inserted markup
   head jquery var       |
   <tbody>             --

What I’m trying is to use:

$('tr.eop').append("</tbody></table><table>+head+<tbody>");   // head = table header

Answer 1

The DOM consists of element nodes, the opening and closing tags mean nothing once an element is part of the DOM or a DOM Fragment.

You cannot attach elements to the page that do not have a closing tag. If the closing tag is omitted, one will be created for you. You also cannot close a parent element by appending a closing tag as a child, it will instead simply create a new complete element inside the parent element.

If you want to create a new table, create a new table.

var newTable = $("<table><thead>"+head+"</thead><tbody></tbody></table>");
$('tr.eop').closest("table").after(newTable)
$('tr.eop').nextAll().appendTo(newTable.find("tbody"));