Upon executing this script, I expect to see the initially empty div with id="checkboxes" transformed into:
<div id="checkboxes">
<label><input type="checkbox">option1</label>
<label><input type="checkbox">option2</label>
<label><input type="checkbox">option3</label>
</div>
I attempted to achieve this result using the following method (since I have an array of the exact options):
<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>
An error message occurs:
Uncaught TypeError: Cannot set property 'appendChild' of null
It points to the line where I attempt to append the child. Can someone please explain why this error is occurring?