通过 jquery html() 和 load() 方法嵌套段落()答案

【问题标题】：Paragraph() nesting by jquery html() and load() methods通过 jquery html() 和 load() 方法嵌套段落()
【发布时间】：2020-03-24 23:35:36
【问题描述】：

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

然而我却意外地像这样嵌套了段落：

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

诀窍是，在  内加载包含带有 ajax 的段落的内容。据我观察，如果一开始就没有这个漏洞利用，它确实可以工作并且看起来就像预期的那样。在我的情况下，这意味着 css-base 边距得到尊重，效果就像“这不是一个错误，而是一个特性”。

这是一个显示它的外观的小提琴：https://jsbin.com/ligilukidu/edit?html,css,js,output

所以我的问题是：

我应该避免违反-nesting 规则，还是可以使用 ajax 加载内容而不用担心它是否包含段落并在段落内加载？
某些浏览器是否会破坏以这种方式嵌套的段落的页面？
还有其他嵌套段落的方法吗？也许是一些“合法”的方式？

【问题讨论】：

您在浏览器中查看了吗？我假设它们从来没有像这样嵌套过。
我做到了，它们确实是嵌套的而没有关闭第一段，并且内段边距在外段内表现“正确”
你能给我看个截图吗？
请检查这个小提琴：jsbin.com/ligilukidu/edit?html,css,js,output 也许我原来的描述不准确，因为我使用的是 jquery，但我想效果是一样的，所以没关系？在我的原始脚本中，我使用 load() 方法从另一个文件加载内容，但我们仍然得到了 ajax 强制嵌套段落。单击 onclick-paragraph 后的效果是 Im 不应该以这种方式工作......或者我应该吗？` - 没有封闭的外部段落，你可能会注意到 - 尊重 css非常好。
学到了一些新东西，猜猜它在你使用 JS 时会起作用。如果您在 html 文件中添加  Some content ，浏览器会自动将其拆分。不要这样做，使用引号进行引用。

标签： jquery html ajax exploit paragraph

【解决方案1】：

不要嵌套 元素。如果将它们嵌套在 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>

【讨论】：