为什么jQuery html()方法将内容添加到段落而不是替换它?

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>

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>