Dynamically created bootstrap buttons lose space padding

Question

I have the a bootstrap button bar using the well class repeated twice in my code: one created using HTML code and another using dynamic javascript.

When I use HTML, the bootstrap works fine.

Whan I use javascript to create it, the buttons lose its padding.

The result I expect is the same in both code.

Why does the dynamic created one does not respect the original horizontal spacing that the HTML created one has ?

Does anyone can help me with that.

Original code:

<div class="well">
    <button type="button" class="btn btn-primary btn-xs">Button 1</button>
    <button type="button" class="btn btn-primary btn-xs">Button 2</button>
    <button type="button" class="btn btn-primary btn-xs">Button 3</button>
    <small class="pull-right">Right Text</small>
</div>


<div id="myMenu">
</div>

<script type="text/javascript">

    $(document).ready(function () {

        var upperWell = $("<div class='well clearfix'>");

        $('#myMenu').append(upperWell);

        var createButton = $("<button type='button' class='btn btn-primary btn-xs'>Button1</button>");

        var updateButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 2</button>");

        var exportButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 3</button>");

        $(upperWell).append(createButton);
        $(upperWell).append(updateButton);
        $(upperWell).append(exportButton);

    });

</script>

The JsFiddle is here:

JsFiddle

Thanks for help.

Answer 1

The static buttons have whitespace between them, the appended buttons don't. You can add a space between each button...

$(upperWell).append(createButton).append(" ");
$(upperWell).append(updateButton).append(" ");
$(upperWell).append(exportButton);

Fiddle

Or you can add a space after each button after they're appended...

$(upperWell).append(createButton);
$(upperWell).append(updateButton);
$(upperWell).append(exportButton);

$("#myMenu button").after(" ");

Fiddle

Answer 2

When we applied a display: inline-block; property to any element, there showing a small gap between two elements.

Refer this link http://css-tricks.com/fighting-the-space-between-inline-block-elements/

But if there is no space between elements (like your buttons created by javascript), the space will not shown.

In your code, When buttons are created by javascript, it appedns in HTML code without any spacing.

Original code:

<div class="well"> <button type="button" class="btn btn-primary btn-xs">Button 1</button> <button type="button" class="btn btn-primary btn-xs">Button 2</button> <button type="button" class="btn btn-primary btn-xs">Button 3</button> <small class="pull-right">Right Text</small> </div>

Dynamically generated code:

<div class="well clearfix"><button type="button" class="btn btn-primary btn-xs">Button1</button><button type="button" class="btn btn-primary btn-xs">Button 2</button><button type="button" class="btn btn-primary btn-xs">Button 3</button></div>

To overcome the above problem you can use the following code

#myMenu button { margin-right: 4px; }