เติม HTML ‹select› ด้วยอาร์เรย์ Javascript

ฉันกำลังพยายามเติมช่องการเลือก HTML จากอาร์เรย์ JavaScript แต่เมื่อฉันรันเพจ คอนโซลของฉันแสดงผลดังต่อไปนี้:

Uncaught TypeError: Cannot read property 'appendChild' of null at hello.html:113

อย่างไรก็ตาม เนื่องจากสร้างโดย JavaScript innerHTML ฉันจึงไม่สามารถเลือกได้ มีวิธีอื่นในการเลือกสิ่งนี้หรือไม่?

var police_api_dates = ["&date=2017-03",];
var info = L.control();
info.onAdd = function (mymap) {
    this._div = L.DomUtil.create('div', 'info');
    this.update();
    return this._div;
};

info.update = function (properties) {
    this._div.innerHTML = '<select id="parent"></select><h4>Highlighted Postcode</h4>' +  (properties ?
        '<b> Postcode: ' + properties.Name
        : 'Hover over a state');
};
var parent = document.getElementById("parent");
for ( var pos = 0; pos < police_api_dates.length; pos++)
{
    //create an <option> to add the <select>
    var child = document.createElement("option");

    //assign values to the <option>
    child.textContent = police_api_dates[pos]
    child.value = pos;

    //attach the mew <option> to the <selection>
    parent.appendChild(child);
}


info.addTo(mymap);