JS附加的文本框意外挤压在一起？

Question

我在html中创建了一组文本输入框，如下所示：

<div id='inputs'>
    <% 6.times do |i| %>

        <%= text_field_tag "box_" + i.to_s, nil, { :id => "box_" + i.to_s,
        :class => "boxes"} %>

    <% end %>
</div>

然后我在框下面有一个按钮的JS监听器：

var nextId = 6;

$("#addBtn").on("click",function(){
    $("#inputs").append("<input type='text' class='boxes' id='box_"+nextCCId+"'/>");
    nextId++;
});

问题是：

渲染时添加的文本框间隔开，但添加了JS的框不会占用空间。

我的浏览器元素检查器上两种类型的框的样式似乎完全相同，发生了什么？它之前似乎运作正常。我不确定我现在是否注意到或者我做了一些事情导致这种情况，但撤消我最近的更改并没有解决它。请帮忙！

Answer 1

我认为你只是错过了jquery标记中的空格。

$("#addBtn").on("click",function(){
    $("#inputs").append("<input type='text' class='boxes' id='box_"+nextCCId+"'/> <!-- space added here -->");
    nextId++;
});