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
Related
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/
I'm writing a code where in there is a json given and out of the key value pairs of json I need to create HTML divs.
Here is my HTML
<div id="col-md-12">
</div>
<input type="button" onclick="addDivs()" />
and my JS
function addDivs() {
var jsonInput = {
'a': '1',
'b': '2'
}
var colDiv = document.getElementById("col-md-12");
var row = document.createElement("div");
row.className = "row";
Object.keys(jsonInput).forEach(function(k) {
var string = k;
var range = jsonInput[k];
var col4Div = document.createElement("div");
col4Div.className = "col-md-4 icon-plus";
var alcohol = document.createElement("span");
alcohol.className = string;
var strong = document.createElement("strong");
strong.innerHTML = string;
var dropDownArrow = document.createElement("span");
dropDownArrow.className = "down-arrow";
alcohol.innerHTML = strong;
alcohol.innerHTML = dropDownArrow;
alcohol.innerHTML = "<br/>";
alcohol.innerHTML = range;
col4Div.innerHTML = alcohol;
row.innerHTML = col4Div;
});
colDiv.innerHTML=row;
}
when I click the button, it gives me message as [object HTMLDivElement] and in console it shows no error.
I'm really confused on what's going on in the backend. My expected output is
<div class="col-md-12">
<div class="row">
<div class="col-md-4 icon-plus">
<span class="a">
<strong>a</strong>
<span class="down-arrow"></span>
<br /> 1</span>
</div>
<div class="col-md-4 icon-plus">
<span class="b">
<strong>b</strong>
<span class="down-arrow"></span>
<br /> 2</span>
</div>
</div>
</div>
please let me know where am I going wrong and how can I fix it.
Here is a working fiddle. https://jsfiddle.net/p9e7cLg9/1/
Thanks
innerHTML deals in strings (of HTML source code). createElement deals in DOM nodes.
When you convert a DOM node to a string, you get "[object HTMLDivElement]", which isn't useful, so don't do that.
Use the appendChild method to add a DOM node as a child of an existing HTML element.
I'm trying to make a chat program in javascript that doesn't show the next question until someone types an answer for the first question.
This function works to display the first question ("paragraph one") and then display the second question ("paragraph two"), but it won't work a third time.
I keep getting an error:
"Uncaught TypeError: Cannot set property 'onchange' of null."
I have tried it with onkeyup and jquery's .keyup() function, but it gives me the same error. When I use the debugger to see the html that is generated, it shows the second paragraph, so I don't understand why the computer is saying it's null.
How can I solve this?
<div id = "div1">
</div>
<script>
function setElement(text, id, id2){
var para = document.createElement("p");
var node = document.createTextNode(text);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
para.id = id;
var inputBox = document.createElement("input");
element.appendChild(inputBox);
inputBox.id = id2;
}
setElement("This is paragraph one.", "p1", "i1");
document.getElementById("i1").onchange = function(){setElement("This is paragraph two.", "p2", "i2")};
document.getElementById("i2").onchange = function(){setElement("This is paragraph three.", "p3", "i3")};
//Uncaught TypeError: Cannot set property 'onchange' of null
</script>
document.getElementById("i2").onchange = function(){setElement("This is paragraph three.", "p3", "i3")};
That element doesn't exist when the javascript runs so it throws an error. You would need to run this line of code after creating the new element.
function setElement(pnum){
var para = document.createElement("p");
var node = document.createTextNode("this is paragraph " + pnum + ".");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
para.id = "p" + pnum;
var inputBox = document.createElement("input");
element.appendChild(inputBox);
inputBox.id = "i" + pnum;
pnum++;
inputBox.onchange = function(){setElement(pnum)};
}
setElement(1);
The above change will keep creating the paragraphs and input fields.
I'm not sure what you're actually trying to accomplish with this, but here is a simulation of a chat app that runs entirely in front-end javascript within a browser window.
function setElement(caller){
var outputs = document.getElementsByClassName("output");
Array.prototype.forEach.call(outputs, function(o) {
o.appendChild(makePara(caller, o));
o.scrollTop = o.scrollHeight;
});
caller.value = "";
}
function makePara(caller, o) {
var para = document.createElement("p");
var node = document.createTextNode(caller.value);
para.appendChild(node);
if (o.parentElement != caller.parentElement.parentElement) {
para.style.textAlign = "right";
para.style.backgroundColor = "#ffeeee";
} else {
para.style.textAlign = "left";
para.style.backgroundColor = "#eeffee";
}
return para;
}
var inputBox1 = document.getElementById("input1");
var inputBox2 = document.getElementById("input2");
inputBox1.onchange = function(){setElement(this)};
inputBox2.onchange = function(){setElement(this)};
.chat {
display: inline-block;
width: 200px;
padding: 20px;
border: 1px solid black;
}
.output {
width: 200px;
height: 200px;
overflow-y: scroll;
overflow-x: wrap;
}
<div id="div1" class="chat">
<h4>Chat window 1</h4>
<div id="txt1" class="output"></div>
<div id="inpt1">
<input type='text' id="input1" />
</div>
</div>
<div id="div2" class="chat">
<h4>Chat window 2</h4>
<div id="txt2" class="output"></div>
<div id="inpt2">
<input type='text' id="input2" />
</div>
</div>
Here is what I ended up with, thanks to Momus and https://www.w3schools.com/css/tryit.asp?filename=trycss_display_js. Thanks also to everybody who kept telling me the elements didn't exist yet. I decided to make them exist first, and then use javascript to show them.
<div id = "div1">
<p id = "p1" style = "display:none;">Hi, I'm RiddleBot. What is your name?</p>
<input id = "i1" type = "text" style = "display:none;">
<p id = "p2" style = "display: none;">Hi. What do you like to do?</p>
<input id = "i2" type = "text" style = "display:none;">
<p id = "p3" style = "display: none;">I like to tell riddles. Do you want to hear one?</p>
<input id = "i3" type = "text" style = "display:none;">
<p id = "p4" style = "display: none;">In marble walls as white as...</p>
<input id = "i4" type = "text" style = "display:none">
</div>
<script>
function showElement(pnum){
var inputBox = document.getElementById("i" + pnum);
document.getElementById("p" + pnum).style.display = "block";
document.getElementById("i" + pnum).style.display = "block";
pnum++;
inputBox.onchange = function () {showElement(pnum)};
}
showElement(1);
</script>
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.
How do I write this HTML using javascript.
<div id="resizeControl">
<input type="image" src="resuce.png" />
<input type="image" src="enlarge.png" />
</div>
and append it to a slidegallery object..
.net
var image1= document.createElement("input"); //create your input
image1.setAttribute('src','resuce.png'); //set the attributes
image1.setAttribute('type','image');
var image2= document.createElement("input");
image2.setAttribute('src','enlarge.png');
image2.setAttribute('type','image');
var resizeControl = document.createElement("div"); //create the parent div
resizeControl.id = "resizeControl"; //assign the id
resizeControl.appendChild(image1); //append your images to the new div
resizeControl.appendChild(image2);
document.body.appendChild(resizeControl); //append the div to your body (or other element)
Code example on jsfiddle
More information on concepts used:
Node.appendChild()
document.createElement()
element.setAttribute()
var div = document.createElement('div'),
input1 = document.createElement('input'),
input2 = document.createElement('input');
div.id = 'resizeControl';
input1.type = 'image';
input1.src = 'resuce.png';
input2.type = 'image';
input2.src = 'enlarge.png';
div.appendChild(input1);
div.appendChild(input2);
document.body.appendChild(div);
Javascript:
document.getElementById("Main").innerHTML += "<strong>Hello!</strong>";
document.getElementById("Main").innerHTML += "<div style='background:red'>Rrrrred!</div>";
HTML:
<div id="Main">
Why...
</div>