Los botones agregados de JavaScript deben ser idénticos al par existente creado con 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>Investigué un poco al respecto y no encontré ninguna explicación. Le agradezco una solución y (sería una bonificación) una explicación de por qué ocurre esto.
Los botones que está creando en el HTML tienen espacios en blanco entre ellos. Cambié tu violín a:
<button>Button 1</button><button>Button 2</button>y terminaron idénticos.
La diferencia es que su HTML contiene espacios en blanco (la nueva línea) entre los elementos de su botón, mientras que los métodos DOM de JavaScript que está utilizando no agregan este espacio en blanco. Puede ver que eliminar los espacios en blanco en el marcado produce los mismos resultados:
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>Si desea que los botones estén separados de cierta manera, le recomiendo que los estilice de la manera que desee:
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>