对于动态插入的内容，空格会消失

Question

我有一个简单的javascript设置，根据用户想要的数量创建或删除字段。但是当用户单击“添加”按钮以创建另一个字段时，字段和元素之间的空间将完全消失。没有应用填充或边距，即使您确实应用了保证金，差异仍然存在。

这是重复的部分

<div class="tax-cont">
  <input type="text" class="form-control inline-field md" placeholder="Tax Name">
  <div class="input-group inline-group md">
    <input type="text" class="form-control" placeholder="Value">
    <label class="input-group-addon"><i class="fa fa-percent"></i></label>
  </div>
  <a class="addRemove btn btn-success btn-round btn-sm"><i class="fa fa-plus"></i></a>
</div>

和javascript

  // Add or Remove additional departure dates
  var taxContent = '<div class="tax-cont"><input type="text" class="form-control inline-field md" placeholder="Tax Name"><div class="input-group inline-group md"><input type="text" class="form-control" placeholder="Value"><label class="input-group-addon"><i class="fa fa-percent"></i></label></div><a class="addRemove btn btn-danger btn-round btn-sm"><i class="fa fa-minus"></i></a></div>';

  $('.tax-cont .addRemove.btn-success').on('click', function(){
    var lastTaxbox = $('.tax-cont').last();
    lastTaxbox.after($(taxContent));
  });
  $('.form-group').on('click', '.btn-danger', function(){
    $(this).parent().remove();
  });

以下是它的外观

我无法弄清楚为什么会发生这种情况。这是一个codepen来演示。

Answer 1

这种情况正在发生，因为inline和inline-block元素在涉及空格时的行为方式。在原始html来源中，<input>和<div>之间有一个新行。哪个是空格，哪个会在页面上的两个元素之间产生空白。

<input type="text" class="form-control inline-field md" placeholder="Tax Name"> <!-- new line -->
<div class="input-group inline-group md"> ... </div>

但是，当您使用Javascript向DOM添加元素时，不会添加任何空格node。所以它只会将两者结合在一起。如果您从原始来源中删除新行，则两个输入也会粘在一起。

作为解决方案，您可以使用margin-right上的<input>或margin-left上的<div>来确保所有行保持相同的间距。

Answer 2

正如其他人所指出的那样，插入集之间没有空格的原因是，它们的代码之间没有空格。感谢nicholas分享link，这很好地解释了它。

为了解决这个问题，我在javascript代码（ ）中添加了空格，这样就产生了与原始DOM相同的空间。

var taxContent = '<div class="tax-cont"><input type="text" class="form-control inline-field md" placeholder="Tax Name">&nbsp;<div class="input-group inline-group md"><input type="text" class="form-control" placeholder="Value"><label class="input-group-addon"><i class="fa fa-percent"></i></label></div>&nbsp;<a class="addRemove btn btn-danger btn-round btn-sm"><i class="fa fa-minus"></i></a></div>';