Невозможно напечатать строку с помощью jquery - при нажатии кнопки

Question

Я хочу отобразить строку в DOM, когда пользователь нажимает кнопку.

Это HTML-код:

<p>
    <h1 class="text-center" id="notif">
    </h1>
</p>

И это часть сценария:

$("#btn_My").click(function(e) {
    $("#notif").html("Hello World!");

Когда нажата кнопка, на визуализированной странице отображается новый абзац, но строка не находится внутри визуализированного представления.

Когда я проверяю исходный код страницы,вот что я получаю:

<p>
</p>
<h1 class="text-center" id="notif" style="display: none;">Hello World!</h1>
<p></p>

Почему это происходит и как мне удастся правильно его отрендерить?

Answer 1

Вы не можете поместить h3 в абзац. Невозможно определить, какой правильный рендер вам подходит, однако я предполагаю, что вы закрыли функцию для щелчка, например:

$("#btn_My").click(function(e) {
    $("#notif").html("Hello World!");
}

HTML-код будет изменен даже до того, как вы нажмете на кнопку, потому чтоон недействителен в созданной вами форме. Причина в том, что браузеры автоматически закрывают незамкнутый встроенный элемент при обнаружении заголовка.

Answer 2

Это нормальное поведение. Поскольку реализация неверна. : (

Причина в том, что тег P является элементом inline, который не может содержать block элементов, как в случае с тегом H1.

Измените P на DIV.

См. Пример: https://jsfiddle.net/ty0uswrm/

Прочитайте эту документацию: https://html.spec.whatwg.org/multipage/dom.html#phrasing-content

Answer 3

<p>
<span id="notif" class="h1"></span>
</p>

Вы можете использовать span вместо h1 и требуемый класс заголовка начальной загрузки вместе с ним. Или избавиться от p , как это

<span id="notif" class="h1"></span>