Почему метод 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 недействителен. A <p> не может иметь <div> в качестве ребенка. Браузер автоматически попытался исправить ваш HTML и превратил его в:

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

В результате, когда вы назначаете HTML из #pContainer, поскольку браузер переместил <div> снаружи из <p>, <div> остается неизменным.

Как MDN помещает :

Пункты элементы уровня блока, в частности , будут автоматически закрыты, если другой элемент уровня блока будет проанализирован перед закрывающим тегом </p>.

(Напротив, наличие <div> внутри другого <div> вполне допустимо.)

Answer 2

Основная проблема - недопустимая разметка html, как CertainPerformance ответила ранее. Лучше использовать одни инструменты, чтобы предотвратить включение несовместимых элементов в другие.

Самый простой способ сделать это - использовать онлайн-валидатор разметки w3 c html. https://validator.w3.org/