使用JavaScript向表格添加TBODY元素时，新增TBODY的属性丢失

你遇到的问题根源在于HTML表格的结构规范限制：<table>的直接子元素只能是<thead>、<tbody>、<tfoot>，<tr>不能直接作为<table>的子节点。浏览器的HTML解析器会自动修正不符合规范的结构——你原始代码里那些不在<tbody>中的<tr class="last-block-element">，其实已经被浏览器自动包裹进了匿名<tbody>里。

当你用insertAdjacentHTML插入<tbody>代码时，浏览器会再次触发结构修正：它不会保留你插入的<tbody>的属性，而是直接把<tbody>内部的<tr>合并到附近的tbody节点中，导致你设置的class和data-value完全丢失。

改用DOM元素创建API来构建并插入<tbody>，绕过HTML解析器的自动修正逻辑，确保属性完整保留：

const lastBlockElements = document.querySelectorAll('.last-block-element');

lastBlockElements.forEach(element => {
  // 创建新tbody并设置属性
  const newTbody = document.createElement('tbody');
  newTbody.classList.add('tbody');
  newTbody.dataset.value = 'new-body';

  // 构建tbody内部的行和单元格
  const tr = document.createElement('tr');
  const td = document.createElement('td');
  td.textContent = 'another row';
  tr.appendChild(td);
  newTbody.appendChild(tr);

  // 插入到目标元素之前
  element.before(newTbody);
});

如果坚持要用HTML字符串插入，需要确保插入位置处于合法的表格结构上下文，但这种方式仍可能触发浏览器的结构修正，稳定性远不如DOM API创建元素的方案。上面的DOM构建方式能100%保证<tbody>的属性和结构符合预期，完全适配Stimulus控制器的需求。

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