为何JS生成的HTML中table位于card div下方？需调整显示顺序

编程初学者遇到的问题：使用JavaScript构建HTML结构时，table元素显示在<div class='card' id='card'>的下方，但实际需求是table优先显示，之后依次展示Notas标签、textarea、Recibido por文本及线条。

错误原因 #

你的代码存在两处关键问题，导致HTML结构解析错乱：

1. 闭合标签未添加到结果变量
   在完成tfoot内的行定义后，有一段用于闭合table和开启notes容器的代码，仅作为独立字符串存在，没有通过result +=添加到最终HTML结果中：

result +=
  "<td id='termsRow' colspan='" + (colSpan - 1) + "'  align='right'><strong>Deposit (%):</strong></td>" +
  "<td><input type='number' id='deposit_percentage' min='0' class='terms' name='numberInputs' value='' onchange='deposit(this)'></td>" +
  "<td id='termsTotal' class='total_terms'><strong></strong></td>" +
  "</tr>";
// 下面这段字符串没有赋值给result，导致标签缺失
"</tfoot>" +
"</table>" +
"<div class='col'>"

这会导致table和tfoot无法正确闭合，浏览器只能自动修复错误结构，最终造成显示顺序混乱。

2. tbody标签不完整
   初始HTML字符串中只包含</tbody>闭合标签，却没有对应的<tbody>起始标签，这也会干扰浏览器的结构解析。

修复方案 #

1. 补全闭合标签的赋值
   将缺失的闭合标签代码添加到result中，修改后的代码如下：

result +=
  "<td id='termsRow' colspan='" + (colSpan - 1) + "'  align='right'><strong>Deposit (%):</strong></td>" +
  "<td><input type='number' id='deposit_percentage' min='0' class='terms' name='numberInputs' value='' onchange='deposit(this)'></td>" +
  "<td id='termsTotal' class='total_terms'><strong></strong></td>" +
  "</tr>" +
  "</tfoot>" +
  "</table>" +
  "<div class='col'>";

2. 添加tbody起始标签
   在thead闭合后添加<tbody>标签，确保table结构完整：

let result = "<div class='card' id='card'><table class='table table-hover table-vcenter' id='dtable'>" +
  "<thead>" +
  "<tr>" +
  "<th style='width:6%'>Prenda</th>" +
  "<th style='width:7%;'>ID</th>" +
  "<th style='width:10%;'>Cliente</th>" +
  "</tr>" +
  "</thead>" +
  "<tbody>"; // 新增tbody起始标签

修复后，HTML结构会正确生成，table会在card容器内优先显示，后续的Notas标签、textarea等元素也会按预期紧跟在table之后。

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