javascript - 为什么 jQuery html() 方法向段落添加内容而不是替换内容？

Question

为什么是 jQuery html()方法，将字符串添加到 <p> 的内容中标记而不是替换它？

function refresh() {
    $('#pContainer').html('<div>updated...</div>');
}
 
 $(document).ready(function ($) {
    window.setInterval(refresh, 3000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id='pContainer'>
    <div>paragraph text remains</div>
</p>

如果是div标签，内容被替换:

function refresh() {
    $('#divContainer').html('<div>updated...</div>');
 }
 
 $(document).ready(function ($) {
    window.setInterval(refresh, 3000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<dic id='divContainer'>
    <div>div text disappears</div>
</div>

Answer 1

您的 HTML 无效。一个<p>不能有<div>作为一个 child 。浏览器已自动尝试更正您的 HTML 并将其转换为:

<p id="pContainer">
    </p><div>paragraph text remains</div>
<p></p>

因此，当您分配给#pContainer的HTML时，因为浏览器已移动 <div> 在 <p> 之外 ，<div>不受影响。

如MDN puts it :

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.

(相比之下，将 <div> 放在另一个 <div> 中是完全有效的。)