通过JavaScript动态添加的按钮元素无间距，如何解决？

我用下面的HTML模板创建按钮：

<template id="unsequenced-template">
    <button type="button" class="btn btn-primary railcar"></button>
</template>

再通过JavaScript将按钮插入DOM：

// Inserts a railcar in the unsequenced list before the specified target
function addSequenced(railcar, $target) {
    var $clone = $($('#unsequenced-template').html());
    $clone.attr('data-id', railcar.id);
    $clone.text(railcar.number);
    $clone.insertBefore($target);
    modified = true;
}

功能正常，但动态插入的按钮之间没有任何间距。我试过给$clone追加空格、在模板里加空白字符都没用。页面初始化时添加的按钮每行一个，且有正常间距，怎么让动态插入的按钮也显示出间距？

解决方案 #

方法1：用CSS统一设置间距（推荐） #

直接通过CSS给按钮类添加外边距，完全不受DOM空白字符的影响，是最稳定的方案。在样式表中添加：

.btn.railcar {
    margin-right: 8px; /* 水平间距，可根据需求调整 */
    margin-bottom: 8px; /* 若按钮换行排列，添加垂直间距 */
}
/* 移除最后一个按钮的右侧间距，避免容器边缘多余空白 */
.btn.railcar:last-child {
    margin-right: 0;
}

不管是初始化时添加的按钮，还是动态插入的，都会自动应用这个样式，间距统一且易维护。

方法2：插入空白文本节点 #

如果必须依赖DOM空白字符来产生间距（比如按钮用inline-block布局时的默认空格间距），可以在插入按钮后额外插入一个空格文本节点：

function addSequenced(railcar, $target) {
    var $clone = $($('#unsequenced-template').html());
    $clone.attr('data-id', railcar.id);
    $clone.text(railcar.number);
    $clone.insertBefore($target);
    // 在按钮和目标元素之间插入空格文本节点
    $target.before(document.createTextNode(' '));
}

不过这种方法容易受后续DOM操作影响，不如CSS方法可靠。

方法3：用Flex布局容器控制间距 #

如果按钮的父容器采用Flex布局，直接用gap属性就能快速设置按钮间的水平/垂直间距：

.railcar-container {
    display: flex;
    flex-wrap: wrap; /* 允许按钮换行 */
    gap: 8px; /* 同时设置水平和垂直间距 */
}

把所有按钮放在这个容器里，不管是静态还是动态添加的，都会自动生成均匀的间距。

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