At the end of running this script, I should see the originally empty div id="checkboxes" becomes:
<div id="checkboxes">
<label><input type="checkbox">option1</label>
<label><input type="checkbox">option2</label>
<label><input type="checkbox">option3</label>
</div>
How I tried to obtain this was (because I have the exact options in an array):
<script type="text/javascript">
function populate() {
debugger;
var x = document.getElementById("checkboxes");
var optionArray = ["option1", "option2", "option2"];
for (var option of optionArray) {
var label = document.createElement("label");
label.innerHTML = "<input type='checkbox'>" + option;
x.appendChild = label;
}
}
populate();
</script>
<html>
<head>
<div id="checkboxes">
</div>
</head>
</html>
I get an error like
Uncaught TypeError: Cannot set property 'appendChild' of null
at the line where I try to append the child, can someone advise why please
