Why do JavaScript added buttons have no default spacing?

Question

This problem seemed so general that I wanted to refrain from asking it as a question here, however I seemed to have a real hard time finding any information regarding given problem. When I am trying to add basic HTML buttons, both <input type="button"> and <button> by a JavaScript click function (or no click at all), given added buttons will appear different. Examples can be found below:

I am trying to achieve the following with even space between buttons:

$(document).ready(function() {
 $("<button>Inserted</button>").insertAfter("button");
  //$("button").after("<button>Inserted</button>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
              Button 1
            </button>
<button>
              Button 2
            </button>
<button>
              Button 3
            </button>

JSFiddle

Basic example with <button> elements:

$(document).ready(function() {
  $("button").click(function() {
    var btn = document.createElement("button");
    var t = document.createTextNode("Added");
    btn.appendChild(t);
    document.body.appendChild(btn);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
              Button 1
            </button>
<button>
              Button 2
            </button>
<button>
              Button 3
            </button>

JSFiddle

Basic example with <input> elements:

$(document).ready(function() {
  $("input").click(function() {
    var btn = document.createElement("input");
    btn.setAttribute("type", "button");
    btn.setAttribute("value", "Added");
    document.body.appendChild(btn);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />

JSFiddle

What is causing the button elements to behave this way or are given elements missing something, like any properties perhaps? By default, an element added by HTML that should appear as a button, would have certain spacing, but this would not be the case when adding this by JavaScript. Also should be noted that this spacing differs by browser. I want "JavaScript added buttons" to behave just like "HTML added buttons".

Edit: According to the answers the problem is clearly whitespace.

Now my question still remains: How could I make newly added buttons by JavaScript behave the same way as newly added buttons by HTML? Is there a way to detect how much whitespace is in between and add this to the buttons so that they will always behave the same way?

I know whitespace is usually unwanted and should be avoided, but I also want to refrain from using weird solutions to make my HTML work when my HTML is working just fine by default when not running any JavaScript.

Try to add the same classes on the new button with Element.classList.add("btn btn-lg btn-narrow btn-default") — , Jan 14 '19 at 10:21
the JS insert the button without whitespace (check the source code) — Temani Afif, Jan 14 '19 at 10:23
My question is not related to the classes being used, examples are without CSS (as of yet). — Barrosy, Jan 14 '19 at 10:26
@barrosy you need to remove white spaces between DOM elements, like: `` check here: https://jsfiddle.net/20yco/qj4gy2f3/2/ — 20yco, Jan 14 '19 at 10:29
no need to know how manu whitespace, 1 or 10 will give the same result. Then you should think differently: don't rely on the whitespace, you should remove it like JS is doing so you don't have any space between element then add margin to control the space — Temani Afif, Jan 14 '19 at 10:58
@TemaniAfif I was thinking of resetting indeed, but that means editing my HTML. — Barrosy, Jan 14 '19 at 11:00
no need to edit the html, check the duplicate and you will find a lot of ways. The easiest one is to set a container with `display:flex` or use font-size trick, or make the element float, etc — Temani Afif, Jan 14 '19 at 11:01
Standard way to fix it in CSS: Give the parent element `font-size: 0;` and set the font-size for the buttons explicitly. — connexo, Jan 14 '19 at 11:14

score 0 · Answer 1 · answered Jan 14 '19 at 10:22

Because you have nextSibling text element

$(document).ready(function() {
  $("input").click(function(el) {
    console.log(el.target.nextSibling ) // nextSibling space text
    var btn = document.createElement("input");
    btn.setAttribute("type", "button");
    btn.setAttribute("value", "Added");
    document.body.appendChild(btn);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />


<input type="button" value="no space 1" /><input type="button" value="no space 1" /><input type="button" value="no space 1" />

Why do JavaScript added buttons have no default spacing?

1 Answers1