Buttons added with JS are not spaced the same as those created with HTML-CodePudding

JavaScript added buttons must be identical to existent pair created with HTML.

function hue() {
  var paragraph = document.createElement("p");

  var button3 = document.createElement("button");
  button3.innerHTML = "Button 3";

  var button4 = document.createElement("button");
  button4.innerHTML = "Button 4";

  paragraph.appendChild(button3);
  paragraph.appendChild(button4);

  var body = document.getElementById("body");
  body.appendChild(paragraph);
}

<body id="body">
  <p>
    <button>
        Button 1
    </button>
    <button>
        Button 2
    </button>
  </p>
  <p>
    <button onclick="hue()">
        Add
    </button>
  </p>
</body>

I've done some research about it and found no explanation. I thank you for a solution and (I'd be a bonus) an explanation why this occur.

CodePudding user response：

The difference is that your HTML contains whitespace (the new line) in between your button elements, whereas the JavaScript DOM methods you're using do not add this whitespace. You can see removing the whitespace in the markup yields the same results:

function hue() {
  var paragraph = document.createElement("p");

  var button3 = document.createElement("button");
  button3.innerHTML = "Button 3";

  var button4 = document.createElement("button");
  button4.innerHTML = "Button 4";

  paragraph.appendChild(button3);
  paragraph.appendChild(button4);

  var body = document.getElementById("body");
  body.appendChild(paragraph);
}

<body id="body">
  <p>
    <button>Button 1</button><button>Button 2</button>
  </p>
  <p>
    <button onclick="hue()">Add</button>
  </p>
</body>

If you want the buttons to be spaced apart a certain way I strongly recommend you style them the way you want:

function hue() {
  var paragraph = document.createElement("p");

  var button3 = document.createElement("button");
  button3.innerHTML = "Button 3";

  var button4 = document.createElement("button");
  button4.innerHTML = "Button 4";

  paragraph.appendChild(button3);
  paragraph.appendChild(button4);

  var body = document.querySelector("body");
  body.appendChild(paragraph);
}

p {
  display: flex;
}

button {
  margin-inline: .2em;
}

<p>
  <button>Button 1</button>
  <button>Button 2</button>
</p>
<p>
  <button onclick="hue()">Add</button>
</p>

CodePudding user response：

The buttons you're creating in the HTML has whitespace between them. I changed your fiddle to:

        <button>Button 1</button><button>Button 2</button>

and they ended up identical.