javascript - JavaScriptを使用してdivを動的に追加する

Question

以下のhtmlがあります：

<div id="DetailsPanel" class="panel">
    <div class="body stack-calc">
        <div class="form stack-elem">
            <div class="field">
            </div>
            //I want append my new Dynamically created DIV here
            <div id="BusinessUnitsContainer" class="field">
            </div>
        </div>
    </div>
</div>

Javascript:

var mainDiv = document.createElement('div');
mainDiv.className = 'field';    

var innerDiv = document.createElement('div');
innerDiv.className = 'SelectAllCheckBox';

var newlabel = document.createElement("Label");
newlabel.innerHTML = "Select All";

var selectCheckbox = document.createElement('input');
selectCheckbox.type = "checkbox";
selectCheckbox.name = "selectCheckbox";
selectCheckbox.id = "selectCheckboxID";
selectCheckbox.checked = true;

innerDiv.appendChild(selectCheckbox);
innerDiv.appendChild(newlabel);
mainDiv.appendChild(innerDiv);

var BusinessUnitsContainerID = document.getElementById('BusinessUnitsContainer');
var DetailsPanelID = document.getElementById('DetailsPanel');
DetailsPanelID.insertBefore(mainDiv,BusinessUnitsContainerID);

「エラー: NotFoundError: ノードが見つかりませんでした」というメッセージが表示されます

何か案が