JavaScript替换子节点时出现[object HTMLTableSectionElement]异常问题

你遇到的核心问题是在DOM节点处理过程中错误地将节点对象转为了字符串，导致输出出现[object HTMLTableSectionElement]这类默认toString()结果。通常是因为你在替换节点时用了字符串拼接（比如直接给innerHTML赋值），而非使用原生DOM操作方法（如replaceChild、appendChild）。

关键错误点 #

当你尝试把<thead>/<tbody>这类节点的内容直接拼接到父节点的innerHTML里时，JS会把节点对象自动转为字符串表示，而不是插入实际的DOM节点。另外，递归处理时如果没有正确区分元素节点和文本节点，也会导致文本节点被不当转换。

正确的DOM处理实现 #

下面是修正后的prepHTMLforExport函数，用原生DOM方法操作，避免字符串转换问题：

function prepHTMLforExport(element) {
  // 遍历子节点时要复制一份，因为原节点列表会在操作时动态变化
  const children = Array.from(element.childNodes);
  
  children.forEach(child => {
    // 处理需要移除的容器标签：thead、tbody、自定义floattext
    if (['THEAD', 'TBODY', 'FLOATTEXT'].includes(child.tagName?.toUpperCase())) {
      // 将子节点移到当前元素下，替换掉容器标签
      while (child.firstChild) {
        element.insertBefore(child.firstChild, child);
      }
      // 移除空的容器标签
      element.removeChild(child);
    } else if (child.nodeType === Node.ELEMENT_NODE) {
      // 递归处理普通元素节点
      prepHTMLforExport(child);
    }
    // 文本节点无需特殊处理，保留原节点即可
  });
}

// 使用示例：传入目标表格元素
const targetTable = document.querySelector('table');
prepHTMLforExport(targetTable);

注意事项 #

• 遍历子节点时要先转成数组：因为childNodes是动态的NodeList，直接遍历的话，当你移除/插入节点时会打乱遍历顺序，用Array.from()复制一份静态列表就能避免这个问题。
• 直接操作节点而非字符串：用insertBefore把容器内的子节点移到父节点中，再移除空容器，全程都是DOM节点操作，不会出现字符串转换问题。
• 区分节点类型：只对元素节点（nodeType === 1）进行递归处理，文本节点（nodeType === 3）直接保留，避免误处理。

内容的提问来源于stack exchange，提问作者Mennolt van Alten