Testing jQuery.after

HTML

<table>
  <thead><tr><td>header</td><td>header</td></tr></thead>
  <tbody><tr id="itemsHeader"><th colspan="2">This is a header</th></tr></tbody>
  <tfoot><tr><td>footer</td><td>footer</td></tr></tfoot>
</table>

CSS

table {
    width: 70%;
    margin: auto;
    margin-top: 5px;
}

table, td, th {
    border: black solid 1px;
    padding: 2px;
}

th {
    font-weight: bold;
    text-align: center;
}

JavaScript

var i, rows = [];

for (i = 0;i < 5; i += 1){
    rows.push('<tr><td colspan="2">This is item ' + i + '</td></tr>');
}
$('#itemsHeader').after(rows.join(''));