jquery - 在 html 文档上使用 jquery 添加元素不会保留间距边距(引导标签)

Question

我有以下代码，这让我头疼。我使用 bootstrap 3.0.3 和 jquery 1.11.0。当代码写成html的时候是这样写的。

<td id="td_id">
    <span class="label label-primary">A</span>
    <span class="label label-primary">B</span>
    <span class="label label-primary">C</span>
</td>

我得到了结果 A B C 正确的格式和标签之间的边距。按下按钮后，我删除了“td”节点的内容，并想使用 jquery 再次重新填充它。

$td = $("#td_id");
$(list).each(function(key, value) {
    var $min_span = $('<span>');
    $min_span.attr("class", "label label-primary");
    $min_span.html(value);
    $td.append($min_span);
});

元素已添加，但问题是我获得的 ABC 元素之间没有边距(间距)。我读过一篇文章，如果您将跨度写在同一行或不同行上，则该文章会有所不同。我是用不同的行写的，一切都很好。

有人遇到过这种情况吗？我想附上一张图片，但我没有积分..:(

谢谢各位的解答

Answer 1

发生这种情况是因为 jQuery 追加跨度时没有在它们之间添加任何空格。自 span是内联元素、空格、换行等会导致它们之间出现间隙。所以你可以模仿新行，例如:

$td = $("#td_id");
var list = ['A', 'B', 'C'];
$(list).each(function(key, value) {
    var $min_span = $('<span>');
    $min_span.attr("class", "label label-primary");
    $min_span.html(value);
    $td.append($min_span, '\n');
});

演示:http://jsfiddle.net/u5NAA/

技巧是插入新行 \n ，选项卡\t甚至只是空间' '每次之后 span元素。