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.
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.
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>