没有带有 createElement/appendChild 的自动化 tbody？答案

【问题标题】：No automated tbody with createElement/appendChild?没有带有 createElement/appendChild 的自动化 tbody？
【发布时间】：2012-01-29 13:36:51
【问题描述】：

使用 javascript createElement/appendChild 创建没有 tbody 的表不会在 Firebug 中添加 tbody，但使用 innerHTML 会做到这一点。为什么？我们应该手动添加 tbody 吗？

【问题讨论】：

我推荐你手动添加tbody，这样你就可以使用table.tBodies

标签： javascript html dom firebug

【解决方案1】：

当使用 DOM 创建方法时，它必须假设你想要你创建它的结构。

如果您想确保不同浏览器中的结构相同，那么您应该始终手动添加它，即使 JavaScript 正在解析 HTML。不要依赖浏览器为您插入它，因为浏览器在这方面的行为可能不同。

Here's an example 你可以在 Firefox 中运行。

从这个 invalid 标记开始。

<p>
    <div>original</div>
</p>

在解析 HTML 时，<div> 被踢出<p>，使其呈现如下...

<p>‌</p>
<div>original</div>
<p></p>

但是如果我们用 DOM 方法创建一个相同的结构，Firefox 不会做任何修正。

var p = document.createElement('p');

p.appendChild(document.createElement('div'))
    .appendChild(document.createTextNode('new'));

document.body.appendChild(p);

所以生成的 DOM 现在是这个......

<p>‌</p>
<div>original</div>
<p></p>

<p>
    <div>new</div>
</p>

因此您可以看到，即使在结构完全无效的情况下，它也不会进行您在解析 HTML 时看到的更正。

最终，您应该做的不是依赖常见的浏览器调整或更正，因为无法保证它们在浏览器之间是相同的。

使用结构良好且有效的 HTML，您会避免出现问题。

【讨论】：

感谢您的提示和示例！对我来说很奇怪，如果 DOM 创建方法以您创建它的方式显示结构，手动创建的 html 表也应该尊重您创建它的方式，无需更正或相反，一切都已更正。
@baptx：当您使用 HTML 时，您并没有真正手动创建 DOM 结构。您通过 markup 创建它，它必须被解析并解释为 DOM 结构。我确信正是这种解释导致了浏览器更正。当您使用 DOM 方法构建 DOM 结构时，不会发生解释。只是开发人员明确表示将这个节点放入那个节点，因此方法会按照您的指示执行。
...我想 DOCTYPE 只在 markup 的解释中起作用，而方法不会尝试强制执行 DOCTYPE.

【解决方案2】：

因为 tbody 元素的开始和结束标签是可选的。您可以通过直接操作 DOM 节点来绕过标签插入。

我们应该手动添加 tbody 吗？

这有点主观。

【讨论】：

谢谢，它是可选的，但根据您使用此节点的方式不遵守标准