Develop Reference

unable to insert to Child in Div with JavaScript

I am new to JavaScript and struck at the point where I am getting errors while inserting two elements, one is-page element and second is Button in the span tag, into one div elements.
document.getElementById('buttonForAddingItemToTheList').addEventListener('click', function() {
var getElementFromTheInput = document.getElementById('inputItemOfHtml').value;
//list item for page
var toCreateTheElementOfList = document.createElement('p');
//button tag
var toCreateTheButton = document.createElement('button');
toCreateTheButton.innerText = "Remove";
//span tag
var toCreateTheSpanForButton = document.createElement('span');
toCreateTheSpanForButton.setAttribute('class', 'classForTheButtonCreateByJavaScript');
//div tag
var toCreateTheElementOfDivContainer = document.createElement('div');
toCreateTheElementOfDivContainer.setAttribute('class', 'divContainerCreatedInJavaScript');
toCreateTheElementOfList.innerText = getElementFromTheInput;
toCreateTheSpanForButton.appendChild(toCreateTheButton);
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfLists);
toCreateTheElementOfDivContainer.appendChild(toCreateTheSpanForButton);
document.getElementById('containerToStoreListItem').appendChild(toCreateTheElementOfDivContainer);
});
<input type="text" placeholder="Enter List Item Here..." id="inputItemOfHtml"><br><br>
<button id="buttonForAddingItemToTheList">Add</button><br><br><br>
<div id="containerToStoreListItem">
</div>

There is typo error in your code
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfLists);
it should be
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);
document.getElementById('buttonForAddingItemToTheList').addEventListener('click', function() {
var getElementFromTheInput = document.getElementById('inputItemOfHtml').value;
//list item for page
var toCreateTheElementOfList = document.createElement('p');
//button tag
var toCreateTheButton = document.createElement('button');
toCreateTheButton.innerText = "Remove";
//span tag
var toCreateTheSpanForButton = document.createElement('span');
toCreateTheSpanForButton.setAttribute('class', 'classForTheButtonCreateByJavaScript');
//div tag
var toCreateTheElementOfDivContainer = document.createElement('div');
toCreateTheElementOfDivContainer.setAttribute('class', 'divContainerCreatedInJavaScript');
toCreateTheElementOfList.innerText = getElementFromTheInput;
toCreateTheSpanForButton.appendChild(toCreateTheButton);
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);
toCreateTheElementOfDivContainer.appendChild(toCreateTheSpanForButton);
document.getElementById('containerToStoreListItem').appendChild(toCreateTheElementOfDivContainer);
});
<input type="text" placeholder="Enter List Item Here..." id="inputItemOfHtml"><br><br>
<button id="buttonForAddingItemToTheList">Add</button><br><br><br>
<div id="containerToStoreListItem">
</div>

You have a typo mistake in third last line
toCreateTheElementOfLists should be toCreateTheElementOfList
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);
https://jsfiddle.net/2wsuj0fr/

Input Text in a dynamic javascript table

I try to generate a text field in a table:
The table gets bigger with the input of the user that's why I cant just write the
input syntax in the html document, because the cell isn´t generated from the beginning.
function tableAdd() {
var table = document.getElementById("table");
var titel = document.getElementById("Titel").value;
var description = document.getElementById("Description").value;
var row = table.insertRow();
var projectCell=row.insertCell(0);
projectCell.innerHTML = titel;
// down here is the problem
var x =row.insertCell(1);
x.innerHTML = document.createElement("INPUT")
x.innerHTML.setAttribute("type", "text");
}

The problem is that x.innerHTML is a string, not a html element. You need to set attribute on html element, not string. You can do like this:
var x =row.insertCell(1);
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
x.appendChild(y);

You are trying to assign a reference of HTMLInputElement which is returned from the call to document.createElement("input"); to the non-existent innerHTML property of a HTMLTableRowElement (newRow in my example) reference, returned by insertCell(1);.
Instead you can assign any text value to the value attribute of the HTMLInputElement(input variable in my example) and append the dynamic input to the newly created cell.
function tableAdd() {
var table = document.getElementById("table");
var titel = document.getElementById("Titel").value;
var description = document.getElementById("Description").value;
var row = table.insertRow();
var projectCell=row.insertCell(0);
projectCell.innerHTML = titel;
var newRow =row.insertCell(1);
var input = document.createElement("input");
input.type = "text";
input.value= description
newRow.appendChild(input);
}
tableAdd();
<body>
<input type="text" id="Titel" value="test"/>
<input type="text" id="Description" value="test"/>
<table id="table">
</table>
<button onclick="tableAdd()">add</button>
</body>
Here is the reference documentation:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

CSS Bootstrap creating elements via javascript

I am trying to create the following HTML code via javascript. For some reason, the bootstrap classes are not getting applied to the javascript code. Any help please?
<div class="form-group">
<label for="inputText" class="col-sm-2 control-label">Comments</label>
<div class="col-sm-10">
<textarea class="form-control" rows = "3" id="inputText" placeholder="Write your comments here"></textarea>
</div>
</div>
I m trying to create this HTML using javascript as below. Not sure what I am missing.
var div = document.createElement('div');
div.class = 'form-group';
var label = document.createElement('label');
label.class = 'col-sm-2 control-label';
label.innerHTML = 'Comments';
label.for = 'inputText';
var div1 = document.createElement('div');
div1.class = 'col-sm-10';
var commentText = document.createElement('textarea');
commentText.class = 'form-control';
commentText.id = 'inputText';
commentText.rows = '3';
commentText.placeholder = 'Write your comments';
div.appendChild(label);
div1.appendChild(commentText);
div.appendChild(div1);

For some reason, the bootstrap classes are not getting applied to the javascript code
That because there's no function class, you should use className, check working snippet bellow.
div.className = 'form-group';
var div = document.createElement('div');
div.className = 'form-group';
var label = document.createElement('label');
label.className = 'col-sm-2 control-label';
label.innerHTML = 'Comments';
label.for = 'inputText';
var div1 = document.createElement('div');
div1.className = 'col-sm-10';
var commentText = document.createElement('textarea');
commentText.className = 'form-control';
commentText.id = 'inputText';
commentText.rows = '3';
commentText.placeholder = 'Write your comments';
div.appendChild(label);
div1.appendChild(commentText);
div.appendChild(div1);
document.body.appendChild(div);
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

One can also use element.classList.add('custom-class') to append class name to class attribute.

This is simplly add bootstrap form-controll using javascript by clicking a button
HTML Bootstrap form input
<div id="dynamicInput">
<div class="form-group" >
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
1.
</span>
</div>
<input type="text" class="form-control" name="subjects" value="{{old('subjects') }}" id="learn" placeholder="They will learn..">
</div>
</div>
</div>
<button type="button" onclick="addInput('dynamicInput');" class=" btn btn-primary ml-5">Add more <i class="fa fa-plus"></i></button>
And Javascripts
var counter = 1;
function addInput(divName){
var group = document.createElement('div');
group.className = 'form-group';
var inputGroup = document.createElement('div');
inputGroup.className = 'input-group';
var inputGroupPre = document.createElement('div');
inputGroupPre.className = 'input-group-prepend';
var inputGroupText = document.createElement('span');
inputGroupText.className = 'input-group-text';
inputGroupText.innerHTML = counter + 1 +".";
var input = document.createElement('input');
input.className = 'form-control';
input.type = 'text';
input.name = 'subjects[]';
input.placeholder = 'what they will learn';
name='myInputs[]'>";
//Appending elements
document.getElementById(divName).appendChild(group);
group.appendChild(inputGroup);
inputGroup.appendChild(inputGroupPre);
inputGroup.appendChild(input);
inputGroupPre.appendChild(inputGroupText);
counter++;
}

Did you load in jQuery and Bootstrap scripts before this script. Also the Bootstrap css? Also, if you really want to create the HTML from scripts, I believe its better to use jQuery - since you already should have it loaded. just put everything in the $( document ).ready() function.

Deleting specific div's with JavaScript

I am trying to spawn different div's and remove them after they do their job. A simple version of my code is:
function eraseDiv(){
var c = document.getElementById("cn1");
c.parentNode.removeChild(child);
}
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.id = "child";
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<a href=\"?\" onclick=eraseDiv(); return false; > Delete</a>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
<input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>'
The problem is that when the first spawned div is deleted, all div's are deleted. Any help is appreciated on how to fix this.

How about something like this:
function eraseDiv(target){
var div = target.parentNode;
var container = div.parentNode;
container.removeChild(div);
}
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<button onclick=eraseDiv(this);> Delete</button>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
<button type="button" name="submit" onclick="spawnDiv();">Spawn</button>
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>
First thing, since you're returning false every time you obviously don't want to use the submit functionality of your submit input, so change it to a button instead.
Second thing, remove the ID from the spawned div since you should never have two divs with the same ID.
Third thing (like the first thing) since you're not using the link functionality of the anchor element, you should change it to a button instead (using CSS you can style this like an anchor if you want to).
Fourth thing, inside the delete button, add this as a parameter to the eraseDiv function. You can now access the button that was clicked using the function parameter rather than trying to find it by an ID.

The simplest fix to your code without modifying the functionality (and view of the page) of what you did is to replace the href="?" with href="#".
In your original code, when you do something like link with the "?" as the hyperlink, this actually performs a GET request which will reload the page. This is tricky because it makes it seem like your delete code is removing all the spawned divs from both cn1 and cn2 divs.
Changing the href=? to href=# prevents a GET request from happening. Below is a snippet that directly makes this change that results in the correct behavior of your original code (by deleting the spawned element in cn1). You will have to further modify your code to make it do what you want.
function eraseDiv(){
var c = document.getElementById("cn1");
c.parentNode.removeChild(c);
}
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.id = "child";
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<a href=\"#\" onclick=eraseDiv(); return false; > Delete</a>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
<input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>

Another way of doing it would be to create a id for div like this
<html>
<body>
<input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>
<script>
function eraseDiv(j){
var c = document.getElementById('child'+j);
c.parentNode.removeChild(c);
}
var i=1;
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.id = "child"+i;
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<u ><a onclick=eraseDiv("+i+++"); > Delete</a></u>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
</script>
</body>
</html>

Dynamically adding div using javascript

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

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