为什么我的 <p> 标签会自动关闭？答案

【问题标题】：Why is my <p> tag getting closed automatically?为什么我的 <p> 标签会自动关闭？
【发布时间】：2015-01-22 00:36:25
【问题描述】：

正如您将在 this fiddle 中看到的那样，我在加载时将一个简单的 html 字符串放置到 textarea 并且该字符串等效于以下（更易读）版本：

<p custom-attr-id='100'>
    <div>text 1</div>
</p>
<p custom-attr-id='101'>
    <div> text 2</div>
</p>

在textarea 的正下方是一个div，它在textarea 中显示渲染的字符串。如果你注意上面的DOM结构，点击输出区域，你会注意到<div>text 1</div>部分不再是<p custom-attr-id='100'></p>的子元素。

那是我不明白的。 <p> 标签应该仍然包裹着 <div>，但是当我所做的只是使用 jQuery 的 html() 方法显示内容时，它会以某种方式解开它并单独放置。这是 Fiddle 行为还是 html() 方法？

【问题讨论】：

【解决方案1】：

你应该反过来做。您显示的代码在p 元素内有一个div。这是无效的，因为 div 是块元素，而 p 元素只允许将 inline 元素放置在其中。

特别是部分：

<!ELEMENT P - O (%inline;)* -- paragraph -->

【讨论】：