Dynamically adding div using javascript

Question

I have below 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);

I am getting "Error: NotFoundError: Node was not found"

Any idea

I cleared the confusion, please suggest solution using javascript — Manoj Singh
– Manoj Singh, Commented Jul 4, 2013 at 8:08

Arun P Johny · Accepted Answer · 2013-07-04 08:12:52Z

2

You are using a mix of jQuery and native node insertBefore.

Using jQuery

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

javascript

In your code the problem is BusinessUnitsContainer is not a direct child of DetailsPanel element.

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

Demo: Fiddle

edited Jul 4, 2013 at 8:12

answered Jul 4, 2013 at 8:07

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically adding div using javascript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related