使用jQuery追加元素时，<div>被置于<p>外而非内部的技术问题

嘿，这个问题我之前碰到过好几次，根源其实是HTML的核心规范在起作用——<p>标签是专门用来包裹段落文本的块级元素，它内部只能容纳内联元素（比如<span>、普通文本），绝对不能嵌套其他块级元素（比如<div>）。

当浏览器解析你写的这段HTML字符串时，它发现你违反了这个规则，就会自动做“纠错处理”：它会先闭合你的<p class="date">标签，然后把<div class="triangle">放在这个闭合的<p>外面，最终生成的DOM结构就变成了：

<p class="date">你的日期文本</p>
<div class="triangle"></div>

这就是为什么你看到的三角形div跑出去了。

下面给你两个简单的解决思路：

方案1：把<div>改成<span>，用CSS调整样式 #

<span>是内联元素，可以合法放在<p>里面，之后你只需要通过CSS把它改成你需要的inline-block或者其他样式就行：

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

对应的CSS（保持你的三角形样式，加上display属性）：

.date .triangle {
    display: inline-block; /* 让它和日期文本在同一行 */
    /* 这里放你原来的三角形样式，比如：
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000;
    */
}

方案2：把外层的<p>换成<div> #

如果你的布局不需要<p>的语义，直接把外层的<p>改成<div>就万事大吉了，因为<div>是通用容器，可以嵌套任何元素：

// 修改后的拼接代码
var dateWrapper = '<div class="date">'+kendo.format('{0:dd MMMM yyyy}',new Date(date))+'<div class="triangle"></div></div>';
$('.wrapper').append(dateWrapper);

这样浏览器就不会再自动调整你的DOM结构，三角形div会老老实实地待在date容器里面，你原来的CSS样式也不用怎么改。

最后给你个小技巧：以后遇到这种元素“乱跑”的情况，直接按F12打开浏览器的开发者工具，看Elements面板里的实际DOM结构，浏览器会把它修正后的结构展示出来，一眼就能找到问题所在！

内容的提问来源于stack exchange，提问作者MikeyB