javascript - 我没有与动态创建的元素相同的渲染 - JQuery - Bootstrap

Question

我正在为我的网站使用 Bootstrap 和 Jquery，但我遇到了问题。 当我动态创建元素时，我没有与我的“静态”元素相同的渲染，那是我的 html 元素:

<div class="row" style="margin-bottom: 10px;">
  <div class="col-xs-4 col-sm-2">
    <button type="button" class="action btn btn-default">
       <span class="glyphicon glyphicon-cog"></span>
    </button>
    <button type="button" class="action btn btn-default">
       <span class="glyphicon glyphicon-remove"></span>
    </button>
  </div>
</div>

这是效果图:

这就是渲染，当我点击添加按钮时:

我不知道为什么渲染是这样的，因为我在我的添加按钮监听器中放置了相同的 html 元素:

        $("#btnAddBuild").click(function(){
        var htmlContent = "<div class='row' style='margin-bottom: 10px;'>" +
                                "<div class='col-xs-4 col-sm-2'>" +
                                    "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button>" +
                                    "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>" +
                                "</div>" +
                            "</div>"
        //console.log(htmlContent);
        $("#rowListBuilds").append(htmlContent);
    });

谢谢

Answer 1

在静态 html 标记中，按钮之间有多个空格字符(折叠为一个空格)，但在用于动态元素的字符串文字中没有空格。

只需在按钮元素之间添加一个[空格]字符

 $("#btnAddBuild").click(function() {
   var htmlContent = "<div class='row' style='margin-bottom: 10px;'>" +
     "<div class='col-xs-4 col-sm-2'>" +
     "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button> " +
     "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>" +
     "</div>" +
     "</div>"
     //console.log(htmlContent);
   $("#rowListBuilds").append(htmlContent);
 });

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rowListBuilds"></div>
<button id="btnAddBuild">Add</button>