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

Question

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

Answer 1

当使用 DOM 创建方法时，它必须假设您想要的结构与您创建它的方式相同。

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

---

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

它以这个无效标记开始。

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

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