使用 jQuery 附加时出现在元素之后而不是在元素中的子元素答案

【问题标题】：Child element appearing AFTER as opposed to IN the element when appended using jQuery使用 jQuery 附加时出现在元素之后而不是在元素中的子元素
【发布时间】：2018-03-19 12:45:36
【问题描述】：

我正在使用 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 之后，而不是放在里面。无法理解为什么会发生这种情况。

【问题讨论】：

从给定的代码中，其他人也很难理解它。请提供更多代码，尤其是您的 date 和 triangle 类。此外，div 默认为 position:block，如果您尚未设置，请将其设置为 inline-block。

标签： javascript jquery css dom

【解决方案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;
}

【讨论】：

Span 元素默认已经是display: inline，不需要额外的CSS。

【解决方案2】：

根据 HTML5 文档（据我所知，旧版本也是如此），p 仅接受 pharsing content 为子级

p element

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

pharsing content

所以像<p><div></div></p>这样的结构不是有效的HTML5结构，所以会自动转换成<p></p><div></div><p></p>。

总而言之，您不能将div 嵌套在p 中，这就是您无法获得所需结果的原因。我建议，在你的情况下，将三角形从 div 更改为 span

【讨论】：