I'm struggling to create a button in javascript

var buttonDivEl = document.getElementById('buttonDiv');
var startFunctionEl = document.getElementById('startFunction');

startFunctionEl.onclick = myFunction;

function myFunction() {
    startFunctionEl.remove();
    var createButton = document.createElement("button");
    createButton.innerHTML = "my new button";
    document.buttonDivEl.appendChild(createButton);
}

<div id="buttonDiv"></div>
<button id="startFunction">Click</button>

My HTML is just a button (id of startFunction) inside of a div (id of buttonDiv)

I'm trying to make it so when I click the startFunction button, it will remove it and add a new button inside of buttonDiv, but it doesn't seem to be working properly. if I replace the following code:

document.buttonDivEl.appendChild(createButton);

with

document.body.appendChild(createButton);

it works, but I want it to append to the buttonDiv specifically, not the body.