after reading a lot of posts here, I've come to the conclusion that textContent is faster than innerHTML and outerHTML; but what happens when I have a lot of data that needs to be replaced?

I have a table with dynamic second columns such as follows. Keep in mind a JS function will show/hide metric or imperial <span> when clicked.

When a new variant is selected, data in the second cells will change.

  <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>

Would it make sense if I put the entirety of my HTML table into JS variables for each variant and use getElementById(#SpecTable).innerHTML to replace it or use 6 functions to change each <span> individually by using getElementById(#IDs for Spans).textContent?

I'm confused as I may have 5 variants, which means 30 JS variables to collect and match when needed, whereas only 5 JS variables that contain the whole table.

In addition, is it better or worst if I get rid of the <div> and use outerHTML to change the table?

I'm a beginner at JS, and if you have other recommendations, I appreciate your input.