Динамическое добавление DIV с помощью JavaScript

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: узел не найден"

Любая идея

Answer 1

Вы используете сочетание jQuery и собственного узла i nsertBefore.

Использование JQuery

$("#BusinessUnitsContainer").before(mainDiv); 

Javascript

В коде проблема BusinessUnitsContainer не является прямым потомком DetailsPanel элемента.

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

Демо: Fiddle