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);

演示：Fiddle

使用javascript动态添加div

1 个答案: