Ya encontraste la solución, voy a intentar explicar por qué ocurre eso y cómo podrías haberlo evitado de otra manera usando las funciones de JavaScript para manipulación del DOM.
Lo primero que tienes que tener en cuenta es que en las herramientas de desarrollador del navegador cuando inspeccionas un elemento, no ves el código generado sino el código que el navegador está interpretando (que puede o no coincidir con el código real).
El problema viene (como ya averiguaste) al hacer la modificación en dos pasos y ocurre porque, aunque el código que añades a la tabla puede ser correcto como un todo, no lo es cuando se divide por partes. El navegador trata de ayudarte corrigiendo esos errores (interpretando qué es lo que querías hacer) y eso causa mayores problemas. Y el misterio de los tbody
que aparecen se explica de igual manera.
El código que compartes es simple:
document.getElementById('tablerepos').innerHTML += "<tr>" + "<td class='repo'> " + "<img src='images/logo.png' id='iconsIMG'> " + json[i].name + "</td>" + " " ;
document.getElementById('tablerepos').innerHTML += "<td class = 'repo'>" + "<img src='images/fork.png' id='iconsIMG'> " + json[i].forks + " <img src='images/star.png' id='iconsIMG'> " + json[i].stargazers_count + "</td>" + "</tr>";
En la primera línea se añade a la tabla una etiqueta de apertura de fila con una celda dentro, y en la segunda línea se añade una celda más y se cierra la etiqueta de fila.
Ahora vamos a ver cómo interpreta el navegador eso (más o menos):
Se ejecuta la primera línea de código
- Se añade una etiqueta de apertura de fila (
<tr>
)
Se añade una celda (abriendo y cerrando sus etiquetas con <td>
y </td>
)
Aquí termina tu código y el navegador empieza a renderizarlo
El navegador se da cuenta que falta una etiqueta de cierre de fila (</tr>
) y la añade automáticamente para que el HTML sea correcto.
- El navegador se da cuenta de que tienes una fila en una tabla pero no está dentro de un
tbody
y añade un tbody
a la tabla con tu fila dentro. Esto no es obligatorio, pero parece que Chrome lo hace para seguir una estructura específica.
Se ejecuta la segunda línea de código
- Se añade una celda (abriendo y cerrando sus etiquetas con
<td>
y </td>
)
Se añade una etiqueta de cierre de fila (</tr>
)
Aquí termina tu código y el navegador empieza a renderizarlo
El navegador se da cuenta que tienes una celda y que está fuera de una fila, así que añade una etiqueta de inicio de fila (<tr>
) para que el HTML sea correcto y esa etiqueta coincide con la de cierre de más tarde.
- El navegador se da cuenta de que tienes una fila en una tabla pero no está dentro de un
tbody
y añade un tbody
a la tabla con tu fila dentro.
Espero que se entienda bien, puede no ser una descripción 100% correcta de cómo interpreta la página el navegador, pero sirve para dar una idea aproximada de cómo lo hace y por qué ocurre lo que ocurre... y por qué vas a seguir teniendo el "problema" de los tbody
que aparecen de la nada (algo que sigue ocurriendo incluso cuando has puesto todo el código en una línea).
Ahora, sé que es muy simple y rápido hacer innerHTML
, pero te voy a poner otro método usando funciones de manipulación del DOM y de tablas con las que obtendrías el mismo resultado:
var tabla = document.getElementById('tablerepos');
var fila = tabla.insertRow();
var celda1 = fila.insertCell();
celda1.innerHTML = "<img src='images/logo.png' id='iconsIMG'> " + json[i].name;
var celda2 = fila.insertCell();
celda2.innerHTML = "<img src='images/fork.png' id='iconsIMG'> " + json[i].forks + " <img src='images/star.png' id='iconsIMG'> " + json[i].stargazers_count;
He hecho un poco de trampa porque el contenido de la celda lo estoy poniendo con innerHTML
cuando podría hacerlo también con createTextNode
y appendChild
y sería algo más largo.
La idea es la misma y funciona sin los inconvenientes explicados antes. Además, si te fijas al inspeccionar elementos, verás que ya no se "crean" múltiples tbody
, ahora el navegador sólo pondrá uno y añadirá las filas de insertRow
todas en el mismo tbody
.