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

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

当使用 DOM 创建方法时，必须假设您希望结构按照您创建的方式进行。

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

这是一个例子你可以在火狐浏览器中运行。

事情是这样开始的invalid markup.

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

The <div>被踢出<p>当 HTML 被解析时，它会像这样呈现......

<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，您将避免出现问题。