javascript - 按下按钮时无法使用 jquery 打印字符串

Question

我想在用户按下按钮时在 DOM 上渲染一个字符串。

这是 HTML 代码:

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

这是脚本的一部分:

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

单击按钮时，呈现的页面中会显示一个新段落，但该字符串不在呈现的 View 内。

当我检查页面的源代码时，这就是我得到的:

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

为什么会发生这种情况以及我如何才能正确渲染它？

Answer 1

这是正常行为。因为实现是错误的。 :(

原因是标签P是一个inline元素，不能包含block元素，就像标签H1的情况一样.

将 P 更改为 DIV。

参见示例:https://jsfiddle.net/ty0uswrm/

阅读此文档:https://html.spec.whatwg.org/multipage/dom.html#phrasing-content