Convert jQuery .html to vanilla js-CodePudding

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" ></td>
    <td title="col_1" ></td>
    <td title="col_2" ></td>
    <td title="col_3" ></td>
    <td title="col_4" ></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" ></td>
    <td title="col_1" ></td>
    <td title="col_2" ></td>
    <td title="col_3" ></td>
    <td title="col_4" ></td>
    <td title="col_5" ></td>
    <td title="col_6" ></td>
    <td title="col_7" ></td>
    <td title="col_8" ></td>
    <td title="col_9" ></td>
    <td title="col_10" ></td>
    <td title="col_11" ></td>
    <td title="col_12" ></td>
    <td title="col_13" ></td>
    <td title="col_14" ></td>
    <td title="col_15" ></td>
    <td title="col_16" ></td>
    <td title="col_17" ></td>
    <td title="col_18" ></td>
    <td title="col_19" ></td>
  </tr>
...etc...
</tbody>

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

CodePudding user response：

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}" ></td>`);
    }

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

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