Generally, I like this style of label and input:
<label><input type="checkbox"> Click me!</label>
Then I can click both the box and the label. But I toyed with creating things this way:
let lab = document.createElement('label');
let cb = document.createElement('input');
cb.type = "checkbox";
lab.appendChild(cb);
There is where I got stuck. If I use lab.innerText="anything" the checkbox goes away. It's that or put the label before or after the checkbox and then you can't click on the label to change the checkbox. I may be screwing up the HTML. I'm not sure. In the end, I had to use lab.innerHTML to add the checkbox. That works, but I know it's not proper. Then I could use lab.querySelector to get the checkbox and attach an onclick event.
There's got to be a better way.
And the answer is YES to my comment!
We can insert a text node before the checkbox is inserted.
Thankfully there is a shortcut to inserting a text node, which is just inserting a string with append:
let lab = document.createElement('label');
let cb = document.createElement('input');
cb.type = "checkbox";
lab.append("label here");
lab.appendChild(cb);
document.body.appendChild(lab);