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：找不到节点”

任何想法

Answer 1

您正在使用 jQuery 和本机节点 insertBefore 的混合。

使用 jQuery

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

javascript

在您的代码中，问题BusinessUnitsContainer不是元素的直接子DetailsPanel元素。

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

演示：小提琴