将 jQuery .html 转换为 vanilla js

Question

I am converting a project away from jQuery and I thought this would be trivial...How do I convert:

let tb = $("#design_table tbody");
tb.html("");

I tried:

let tb = document.querySelector("#design_table tbody");
tb.innerHTML = "";
  

When I use the above my table becomes:

[object Object][object Object][object Object][object Object]...etc

There is only 1 table with tbody tag

Edit: The querySelector appears to be selecting the table:

<tbody>
  <tr title="row_0">
    <td title="col_0" class="material_0 rotate_0"></td>
    <td title="col_1" class="material_0 rotate_0"></td>
    <td title="col_2" class="material_0 rotate_0"></td>
    <td title="col_3" class="material_0 rotate_0"></td>
    <td title="col_4" class="material_0 rotate_0"></td>
...etc.

This works, but still half jQuery:

let tb = $("#design_table tbody");
tb.innerHTML;

Code :

function reDraw () {
      let tb = $("#design_table tbody");
      tb.html("");
      for (var y = 0; y < MCD.settings.fieldHeight; y += 1) {
        var new_row = $("<tr>", {
          title: "row_" + y
        });
        for (var x = 0; x < MCD.settings.fieldWidth; x += 1) {
          let new_cell = $("<td>", {
            title: "col_" + x,
            //class: "material_" + MCD.matrix[y][x] + " rotate_0",
            class: "material_" + MCD.matrix[y][x][0] + " rotate_" + MCD.matrix[y][x][1],
          });
    new_row.append(new_cell);
        }
        tb.append(new_row);
      }
  }     

Update : For:

let tb = $("#design_table tbody");
      console.log(tb)
      tb.html("");
      let ab = document.querySelectorAll("#design_table tbody");
      console.log(ab[0]);

Console.log returns:

d { 0: HTMLTableSectionElement, length: 1, prevObject: d, context: HTMLDocument, selector: "#design_table tbody" }
<tbody>
  <tr title="row_0">
    <td title="col_0" class="material_0 rotate_0"></td>
    <td title="col_1" class="material_0 rotate_0"></td>
    <td title="col_2" class="material_0 rotate_0"></td>
    <td title="col_3" class="material_0 rotate_0"></td>
    <td title="col_4" class="material_0 rotate_0"></td>
    <td title="col_5" class="material_0 rotate_0"></td>
    <td title="col_6" class="material_0 rotate_0"></td>
    <td title="col_7" class="material_0 rotate_0"></td>
    <td title="col_8" class="material_0 rotate_0"></td>
    <td title="col_9" class="material_0 rotate_0"></td>
    <td title="col_10" class="material_0 rotate_0"></td>
    <td title="col_11" class="material_0 rotate_0"></td>
    <td title="col_12" class="material_0 rotate_0"></td>
    <td title="col_13" class="material_0 rotate_0"></td>
    <td title="col_14" class="material_0 rotate_0"></td>
    <td title="col_15" class="material_0 rotate_0"></td>
    <td title="col_16" class="material_0 rotate_0"></td>
    <td title="col_17" class="material_0 rotate_0"></td>
    <td title="col_18" class="material_0 rotate_0"></td>
    <td title="col_19" class="material_0 rotate_0"></td>
  </tr>
...etc...
</tbody>

Obviously two different results, but I don't understand why.

Answer 1

Roughly, it translates like this:

function reDraw () {
  //let tb = $("#design_table tbody");
  let tb = document.querySelector('#design_table tbody');

  //tb.html('');
  tb.innerHTML = '';

  for (var y = 0; y < MCD.settings.fieldHeight; y += 1) {

    //var new_row = $("<tr>", {
    //  title: "row_" + y
    //});
    var new_row = document.createElement('tr');
    new_row.title = 'row_' + y;

    for (var x = 0; x < MCD.settings.fieldWidth; x += 1) {

      //let new_cell = $("<td>", {
      //  title: "col_" + x,
      //  class: "material_" + MCD.matrix[y][x][0] + " rotate_" + MCD.matrix[y][x][1],
      //});
      let new_cell = document.createElement('td');
      new_cell.title = 'col_' + x;
      new_cell.className = 'material_' + MCD.matrix[y][x][0] + ' rotate_' + MCD.matrix[y][x][1];

      new_row.append(new_cell);
    }
    tb.append(new_row);
  }
}

This isn't an exact translation. For example, jQuery creates wrappers for the elements and passes those around.

After clean up and optimizing, it looks like this:

function reDraw () {
  const html = [];

  for (var y = 0; y < MCD.settings.fieldHeight; y += 1) {
    html.append(`<tr title="row_${y}">`);

    for (var x = 0; x < MCD.settings.fieldWidth; x += 1) {
      html.append(`<td title="col_${x}" class="material_${MCD.matrix[y][x][0]} rotate_${MCD.matrix[y][x][1]}"></td>`);
    }

    html.append('</tr>');
  }

  const tb = document.querySelector('#design_table tbody');
  tb.innerHTML = html.join('');
}