在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。