Si quieres usar append
, tienes que usarlo en el elemento tr
dentro del elemento th
. Porque append
añade el HTML al final del elemento.
let cont = 0;
const $filaTitulos = $('thead tr');
function agregar() {
cont++;
const numero = $filaTitulos.children().length + 1;
const html = "<th>Titulo`<th>Titulo 3<${numero}</th>";th>`;
$filaTitulos.append(html);
}
agregar();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cuerpo 1</td>
<td>Cuerpo 2</td>
</tr>
</tbody>
</table>
<button onclick="agregar()">Agregar TH</button>
Si quieres añadir también al tbody
, la idea es la misma, tienes que hacer append
a cada tr
dentro de tbody
.