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>Fiddle: https://jsfiddle.net/gustavovasconcellos/35oq6mzp/40/
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.
Thanks for your attention.
>Solution :
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.