当使用jQuery追加时，子元素出现在AFTER而不是IN元素中

Question

我使用jQuery追加以下内容：

var dateWrapper = '<p class="date">'+kendo.format('{0:dd MMMM yyyy}',new Date(date))+'<div class="triangle"></div></p>'
$('.wrapper').append(dateWrapper)

我希望三角形与日期一起显示为内联或内联块。一旦附加，DIV就放在P之后，而不是在里面。无法理解为什么会发生这种情况。

Answer 1

你不能把div放在p标签里面。它会自动将它放在p标签之外。你应该使用..

var dateWrapper = '<p class="date">'+kendo.format('{0:dd MMMM yyyy}',new Date(date))+'<span class="triangle"></span></p>';
$('.wrapper').append(dateWrapper);

在css中

.triangle{
display:inline;
}

Answer 2

根据HTML5文档（据我所知，旧版本的内容相同），p只接受pharsing content

Pharsing content表示纯文字或pharsing elements，其中包括<a>，</span>，<strong>等，但不包括<div>

p element

因此像<p><div></div></p>这样的结构不是有效的HTML5结构，因此会自动转换为<p></p><div></div><p></p>。

总之，你不能在div内嵌套p，这就是你没有得到理想结果的原因。在你的情况下，我建议将三角形从div更改为span