表格标签不嵌套在DOM中的P标签内

Question

我一直在播放对innerHTML内容的动态更改，并注意到一些嵌套在其他元素内的表的奇怪行为。

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

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

我的知识有什么差距？

TIA

Answer 1

你不能把一个<table>一个<p>内。从HTML4 specification：

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

，然后如果你看一下%inline; elements are，你不会在列表中找到<table>。

而对于HTML5，<p> can contain phrasing content：

允许内容

措词内容

而且phrasing content是字符数据和phrasing elements，措辞元件是：

一个或EM或强或小 ...米

有没有在该列表中没有<table>。

因此，您试图插入无效的HTML，并且浏览器将<p><table></table></p>更改为<p></p><table></table>（即将表格子项移至同级）以获取有效的HTML。

如果你给浏览器提供了无效的HTML，浏览器会猜测你的真实含义并猜测它。

Answer 2

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

使用表格的容器元素，如<div>。

祝你好运！ :)