When using input to collect information in a form and then dynamically building it into a table, I encountered an issue with the placement of <td> elements within <tr>. In one example, the <td>'s were outside the <tr>, which I believe is due to auto-closing. However, when attempting to adjust the code to have all <td> elements within the <tr>, they appeared on separate rows.
I'm looking for guidance on how to properly structure the code to ensure that all <td> elements are contained within the same row without compromising the appearance of the table.
var $tbodyAppend = $('table > tbody:last-child');
// this puts the <td>'s outside the tr, but looks correct on the page
$tbodyAppend.append("<tr>");
$tbodyAppend.append("<td><span></span></td>");
$tbodyAppend.append("<td><span></span></td>");
$tbodyAppend.append("<td><span></span></td>");
// this puts the <td>'s in the <tr>
$tbodyAppend.append("<tr><td><span></span></td><td><span></span></td><td><span></span></td>");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th><span>column 1</span></th>
<th><span>column 2</span></th>
<th><span>column 3</span></th>
</tr>
<tbody>
<!-- want jQuery to append here -->
</tbody>
</table>