将jQuery的.html()转换为原生JS时遇表格显示异常问题

你只替换了tbody的获取方式为原生JS，但后续循环里创建的new_row、new_cell还是jQuery包装后的对象。当你调用原生DOM元素的append方法时，JS会把jQuery对象强制转为字符串，也就是你看到的[object Object]。而半混合代码能工作，是因为tb是jQuery对象，它的append方法兼容jQuery元素。

把整个reDraw函数的jQuery操作全部转为原生JS，代码如下：

function reDraw () {
  let tb = document.querySelector("#design_table tbody");
  tb.innerHTML = "";
  for (let y = 0; y < MCD.settings.fieldHeight; y += 1) {
    let new_row = document.createElement('tr');
    new_row.title = "row_" + y;
    
    for (let x = 0; x < MCD.settings.fieldWidth; 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.appendChild(new_cell);
    }
    tb.appendChild(new_row);
  }
}

• 创建元素：用document.createElement()替代jQuery的$("<tag>")
• 设置属性：直接给DOM元素的属性赋值（如element.title），类名用element.className（如果需要逐个添加类，也可以用element.classList.add()）
• 添加子元素：用原生appendChild()替代jQuery的append()

如果不想一次性全改，也可以把jQuery对象转成原生DOM元素再append，比如：

// 给jQuery对象加[0]获取原生DOM节点
tb.appendChild(new_row[0]);

但这种混合写法容易引发混乱，建议直接全量迁移为原生JS。

内容的提问来源于stack exchange，提问作者maddogandnoriko