DOM中的表格标签不能嵌套在段落标签内部

Question

我一直在尝试动态更改innerHTML内容，发现嵌套在其他元素中的表格会出现一些奇怪的行为。

例如，form p /p p table /table /p /form并没有将第二个p标签中的表格视为innerHTML，而是将其列为该p标签的同级标签而不是子标签。

我认为这是一个众所周知的行为。

我的知识漏洞在哪里？

先感谢您。

- Muzza Muzza

Answer 1

您不能在 <p> 标签中放置 <table> 标签。根据 HTML4 规范：

<!ELEMENT P - O (%inline;)* -- paragraph -->
[...]
它不能包含块级元素（包括 P 本身）。

如果您查看 %inline; 元素列表，您将不会在列表中找到 <table>。

对于 HTML5，<p> 可以包含 phrasing content：

允许的内容

Phrasing content

phrasing content 是字符数据和 phrasing elements，phrasing elements 包括：

a 或 em 或 strong 或 small ... meter

在该列表中没有 <table>。

因此，您正在尝试插入无效的 HTML，浏览器将 <p><table></table></p> 更改为 <p></p><table></table>（即将表格子级移动到同级），以获取有效的 HTML。

如果您提供浏览器无效的 HTML，则浏览器会猜测您的真实意图并采用其猜测。

- mu is too short

Answer 2

这是因为 <p> 和 <table> 都是块级元素。

使用一个容器元素来包含你的表格，例如 <div>。

祝好运！ :)

- Fishz