después de leer muchas publicaciones aquí, llegué a la conclusión de que textContent es más rápido que innerHTML y outsideHTML ; pero, ¿qué sucede cuando tengo muchos datos que necesitan ser reemplazados?

Tengo una tabla con segundas columnas dinámicas como las siguientes. Tenga en cuenta que una función JS mostrará/ocultará <span> métrico o imperial cuando se haga clic.

Cuando se selecciona una nueva variante, los datos en las segundas celdas cambiarán.

 <div class="spec-table" id="SpecTable"> <table class="table"> <tr> <td>dimension_1_title</td> <td><span class="spec-table_metric">dimension_1_metric</span><span class="spec-table_imperial">dimension_1_imperial</span></td> </tr> <tr> <td>dimension_2_title</td> <td><span class="spec-table_metric">dimension_2_metric</span><span class="spec-table_imperial">dimension_2_imperial</span></td> </tr> <tr> <td>Other information</td> <td><span class="spec-table_metric">Other information metric</span><span class="spec-table_imperial">Other information imperial</span></td> </tr> </table> </div>

¿Tendría sentido si pongo la totalidad de mi tabla HTML en variables JS para cada variante y uso getElementById(#SpecTable).innerHTML para reemplazarla o uso 6 funciones para cambiar cada <span> individualmente usando getElementById(#IDs for Spans).textContent ?

Estoy confundido porque puedo tener 5 variantes, lo que significa 30 variables JS para recopilar y combinar cuando sea necesario, mientras que solo 5 variables JS que contienen la tabla completa.

Además, ¿es mejor o peor si me deshago de <div> y uso externalHTML para cambiar la tabla?

Soy un principiante en JS, y si tiene otras recomendaciones, agradezco su aporte.