Paragraph(<p>) 通过 jquery html() 和 load() 方法嵌套

Question

段落不能包含块级元素，包括其他段落。我不同意这种逻辑，因为我看不出嵌套段落有什么问题——例如，如果我想在段落中引用段落。但也许这就是我。

然而我不小心把段落嵌套成这样：

<p> <p>inner paragraph</p> </p>

诀窍是，在 <p> 内容中加载包含 ajax 段落的内容。据我观察，如果一开始就没有这种利用，它确实可以正常工作并且看起来就像预期的那样。在我的例子中，这意味着 css-base margins 被尊重，效果就像 "this is not a bug, it is a feature".

这里有一个 fiddle 显示它的样子：https://jsbin.com/ligilukidu/edit?html,css,js,output

所以我的问题是：

我是否应该避免违反 <p> 嵌套规则，或者使用 ajax 加载内容就可以了，而不用担心它是否包含段落并加载到段落内？
某些浏览器会破坏以这种方式嵌套段落的页面吗？
还有其他嵌套段落的方法吗？也许有一些 "legal" 方式？

Answer 1

不要嵌套 <p> 个元素。如果将它们嵌套在 HTML 中，浏览器会自动将它们拆分。我很惊讶它可以与 JS 一起使用，但我不会依赖它。

如果您想引用某些内容，请使用引用标签。

如果只是关于样式，span 是要使用的元素。您需要添加一些 CSS 以使它们具有与段落相同的样式，但这是正确（合法）的方式：

#test {
padding: .2em;
}

#test span {
display: block; 
padding: .2em;
}

<p>When Dave asks HAL to open the pod bay door, HAL answers: <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that.</q></p>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> From mdn web docs</a>

<p id="test">
Lorem ipusm 
<span> some more text </span>
</p>

Paragraph(<p>) 通过 jquery html() 和 load() 方法嵌套

Paragraph(<p>) nesting by jquery html() and load() methods

html

ajax

jquery

exploit

paragraph