Develop Reference

Can't clone <template> to append to <div>

I create this template successfully with javascript:
I create the template in an async function:
this.createBoxes = async function() {
var row_counter = 0;
for (var i = 1; i < this.fake_data.length + 1; i++) {
var item_box = document.createElement("div");
item_box.style.flex = "0.5";
item_box.style.backgroundColor = "white";
item_box.style.display = "flex";
item_box.style.flexDirection = "column";
item_box.style.justifyContent = "flex-end";
item_box.id = "item_box_"+i;
var item_name = document.createElement("h3");
item_name.style.flex = "0.2";
item_name.style.backgroundColor = "orange";
item_name.style.alignSelf = "center";
item_name.innerText = this.fake_data[i - 1].name;
item_name.id = "item_name_"+i;
item_box.appendChild(item_name);
this_row = document.getElementsByClassName("row")[row_counter];
this_row.appendChild(item_box);
if(i % 2 == 0) {
var pool = document.getElementById("pool");
var inner_row = document.createElement("div");
inner_row.style.display = "flex";
inner_row.style.flexDirection = "row";
inner_row.style.flex = "0.5";
inner_row.style.justifyContent = "space-around";
inner_row.style.alignItems = "center";
inner_row.style.backgroundColor = "green";
inner_row.className = "row";
pool.appendChild(inner_row);
row_counter++;
}
else if(i == this.fake_data.length) {
return;
}
}
}
Then I do this:
this.createBoxes().then(function() {
var template = document.querySelector('#pool');
var clone = template.content.cloneNode(true);
document.querySelector(".app").appendChild(clone);
})
But as you can see from my screenshot, .app is empty. What am I doing wrong? I am using Cordova and I am assuming that it is able to use the template tag, I haven't been able to find anything saying I can't.
UPDATE
This happens:
When I do this:
this.createBoxes().then(function() {
var template = document.querySelector('#pool');
var clone = template.cloneNode(true);
document.querySelector(".app").appendChild(clone);
});
Using template.cloneNode successfully moves the <template> but this is obviously not what I want, I want to get the contents of the <template> and move them to .app container, not the whole <template>.

You should be cloning the template's .content instead, as demonstrated in the documentation.
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);

Well, if cloning the node itself works, then the answer is pretty simple - just clone/append children of the template:
this.createBoxes().then(function() {
let template = document.querySelector('#pool');
let app = document.querySelector(".app");
for(let child of template.childNodes) {
let clone = child.cloneNode(true);
app.appendChild(clone);
}
});
Note that I have not tested this code - you may need to debug it as necessary.

I added a container to the template programmatically:
var pool = document.getElementById("pool");
var container = document.createElement("div");
container.style.flex = "1";
container.style.backgroundColor = "white";
container.style.display = "flex";
container.style.flexDirection = "column";
container.id = "container";
var row = document.createElement("div");
row.style.display = "flex";
row.style.flexDirection = "row";
row.style.flex = "0.5";
row.style.justifyContent = "space-around";
row.style.alignItems = "center";
row.style.backgroundColor = "green";
row.className = "row";
container.appendChild(row);
pool.appendChild(container);
Then instead of adding my content to the #pool <template>, I added it to #container, and then stored the #container node in a variable, and then imported that into .app:
var container_in_temp = document.querySelector('#pool>#container');
var targetContainer = document.querySelector('.app');
targetContainer.appendChild(document.importNode(container_in_temp, true));
So it ends up looking like this, with a container in .app which is actually kind of preferable structure wise :).

Make a div in Javascript and output it to the DOM

I am having a little trouble right now creating multiple divs through javascript. This form has helped me create one. but I am trying to create 3. If anyone could help that would be great. I looked on one form How can I create and style a div using JavaScript? and was able to create one div. But I cannot figure out out to create multiple divs that are calling from an HTML div ID.
window.onload = function() {
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "300px";
div.style.background = "#FF0000";
div.innerHTML = "Going";
document.getElementById("one").appendChild(div);
var two = document.createElement("two");
div.style.width = "200px";
div.style.height = "200px";
div.style.background = "#FF0000";
div.innerHTML = "To Do";
document.getElementById("two").appendChild(two);
var three = document.createElement("three");
div.style.width = "300px";
div.style.height = "100px";
div.style.background = "#0000FF";
div.innerHTML = "Great";
document.getElementById("three").appendChild(three);
};
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

Write your javascript something like this
window.onload = function() {
var div1 = document.createElement("div");
div1.style.width = "100px";
div1.style.height = "300px";
div1.style.background = "#FF0000";
div1.innerHTML = "Going";
document.getElementById("one").appendChild(div1);
var div2 = document.createElement("div");
div2.style.width = "200px";
div2.style.height = "200px";
div2.style.background = "#FF0000";
div2.innerHTML = "To Do";
document.getElementById("two").appendChild(div2);
var div3 = document.createElement("div");
div3.style.width = "300px";
div3.style.height = "100px";
div3.style.background = "#0000FF";
div3.innerHTML = "Great";
document.getElementById("three").appendChild(div3);
};

As you can see in the picture below. Your code creates tags <two></two> and <tree></tree>, which is not valid html tags.
To solve this problem, just pass div instead of two and three into document.createElement() function. Like so:
var two = document.createElement("div");
... element styling here ...
two.style.width = "200px";
two.style.height = "200px";
...
var three = document.createElement("div");
... element styling here ...
three.style.width = "200px";
three.style.height = "200px";
...

Here is something fun to play with, might be helpful.
function CREATE_DIV( _WHERE_DO_YOU_WANT_IT_ , _STYLE_IT_ , _ID_IT_ , _INNER_TEXT_ ){
var div = document.createElement("div");
/* SET THE ID */
div.id = _ID_IT_;
/* SET THE INNERHTML */
div.innerHTML = _INNER_TEXT_;
/* SET THE STYLE PROPERTIES */
for(var RESULT in _STYLE_IT_){
if( _STYLE_IT_.hasOwnProperty(RESULT)){
/* ADD WHAT YOU NEED */
/* ADD WHAT YOU NEED */
console.log(RESULT+':'+_STYLE_IT_[RESULT]);
if(RESULT==='background'){div.style.background = _STYLE_IT_[RESULT]; }
if(RESULT==='position'){ div.style.position = _STYLE_IT_[RESULT]; }
if(RESULT==='width'){ div.style.width = _STYLE_IT_[RESULT]; }
if(RESULT==='height'){ div.style.height = _STYLE_IT_[RESULT]; }
if(RESULT==='left'){ div.style.left = _STYLE_IT_[RESULT]; }
if(RESULT==='top'){ div.style.top = _STYLE_IT_[RESULT]; }
if(RESULT==='padding'){ div.style.padding = _STYLE_IT_[RESULT]; }
if(RESULT==='border'){ div.style.border = _STYLE_IT_[RESULT]; }
//div.style.setAttribute( RESULT, _STYLE_IT_[RESULT] );//.RESULT = _STYLE_IT_[RESULT];
}}
/* APPEND OR ADD DIV TO ELEMENT */
/* ( _WHERE_DO_YOU_WANT_IT_ ) */
_WHERE_DO_YOU_WANT_IT_.appendChild(div);
}///
////
////
window.onload = function() {
var I_WANT_IT_HERE = document.getElementsByTagName('BODY')[0];
var GIVE_IT_AN_ID = 'DIV_01';
var INNER_HTML_TEXT= 'Div 1<BR>Whatever i want in my DIV !!!'
var STYLE = {}; // CREATE javascript Object of data. NOT Array.
STYLE['position'] = 'absolute';
STYLE['width'] = '90%';
STYLE['height'] = '33%';
STYLE['left'] = '0px';
STYLE['top'] = '0px';
STYLE['border'] = '2px dotted red';
STYLE['background']='rgba(300, 300, 300, 0.7)';
CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
STYLE['padding'] = '8px';
STYLE['left'] = '0px';
STYLE['top'] = '33%';
var GIVE_IT_AN_ID = 'DIV_02';
var INNER_HTML_TEXT= 'Div 2'
CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
var STYLE = {};// THIS RESETS STYLE
// EXAMPLE no position is set.
STYLE['padding'] = '8px';
STYLE['left'] = '0px';
STYLE['top'] = '66%';
STYLE['border'] = '1px dotted blue';
var GIVE_IT_AN_ID = 'DIV_03';
var INNER_HTML_TEXT= '<BR><BR><BR><BR>Div 3 is under Div 1'
CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
STYLE['left'] = '0px';
STYLE['top'] = '66%';
STYLE['border'] = '1px dotted lime';
var GIVE_IT_AN_ID = 'DIV_04';
var I_WANT_IT_HERE = document.getElementById('DIV_02');
var INNER_HTML_TEXT= 'Div 4 is inside Div 2<SPAN ID=SPAN></SPAN>'
CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
STYLE['border'] = '1px dotted blue';
var I_WANT_IT_HERE = document.getElementById('SPAN');
var INNER_HTML_TEXT= 'This is a span inside of DIV 02 & DIV 04'
CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
/*************************/};

Why is the function in my Javascript code executing right away but not when I click the button?

I am having trouble understanding why the text is not changing when I click the button. It is being executed right away when the page starts instead. I am not sure why this is happening because I told it to only execute when you click on the button.
<!DOCTYPE html>
<html id="all">
<head>
<head>
</head>
<title>Lab8</title>
<style></style>
</head>
<body>
<script>
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);
iDiv.style.backgroundColor = "#d79365";
iDiv.style.padding = "40px";
var innerDiv2 = document.createElement('div');
innerDiv2.className = 'block-3';
iDiv.appendChild(innerDiv2);
innerDiv2.style.padding = "40px";
innerDiv2.style.textAlign = "center";
innerDiv2.innerHTML = "Here is changing the text: ";
//innerDiv2.innerHTML = "Text Change when button clicked";
//innerDiv2.style.textAlign = "center";
// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';
// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);
innerDiv.innerHTML = "I'm the inner div";
innerDiv.style.padding = "40px";
innerDiv.style.backgroundColor = "#eac67a";
var ClickButton = document.createElement('button');
ClickButton.className = 'block-4';
iDiv.appendChild(ClickButton);
ClickButton.innerHTML = "Style";
ClickButton.style.margin = "auto";
ClickButton.style.display = "block";
ClickButton.style.width = "80px";
ClickButton.style.height = "50px";
ClickButton.style.top = "50px";
ClickButton.style.backgroundColor = "#233237";
ClickButton.style.color = "white";
function js_style(){
alert("hi");
document.querySelector("innerDiv2");
innerDiv2.style.fontSize = 'large';
innerDiv2.style.font = 'italic bold 20px arial,serif';
innerDiv2.style.color = "#eac67a";
};
document.getElementsByTagName('button').onclick = js_style();
</script>
</body>

The problem with your code is that getElementsByTagName returns a HTMLCollection - which behaves a little like an array, in that you can access the individual elements using array syntax like x[0]
However, as you're creating the button dynamically, you can dispense with that, and, in the process, dispense with last millennium code element.onclick=rubbish
var ClickButton = document.createElement('button');
ClickButton.addEventListener('click', js_style);
done

document.getElementsByTagName('button') returns a HTMLCollection.
Setting the 'onclick' value of the HTMLCollection does not set the 'onclick' handle of the button.
i could get the example to work by giving the button an id and retrieving the button via that id (rather than it's tag name):
https://jsfiddle.net/0L1kj3ja/
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);
iDiv.style.backgroundColor = "#d79365";
iDiv.style.padding = "40px";
var innerDiv2 = document.createElement('div');
innerDiv2.className = 'block-3';
iDiv.appendChild(innerDiv2);
innerDiv2.style.padding = "40px";
innerDiv2.style.textAlign = "center";
innerDiv2.innerHTML = "Here is changing the text: ";
//innerDiv2.innerHTML = "Text Change when button clicked";
//innerDiv2.style.textAlign = "center";
// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';
// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);
innerDiv.innerHTML = "I'm the inner div";
innerDiv.style.padding = "40px";
innerDiv.style.backgroundColor = "#eac67a";
var ClickButton = document.createElement('button');
ClickButton.id = 'btn';
ClickButton.className = 'block-4';
iDiv.appendChild(ClickButton);
ClickButton.innerHTML = "Style";
ClickButton.style.margin = "auto";
ClickButton.style.display = "block";
ClickButton.style.width = "80px";
ClickButton.style.height = "50px";
ClickButton.style.top = "50px";
ClickButton.style.backgroundColor = "#233237";
ClickButton.style.color = "white";
function js_style(){
alert("hi");
document.querySelector("innerDiv2");
innerDiv2.style.fontSize = 'large';
innerDiv2.style.font = 'italic bold 20px arial,serif';
innerDiv2.style.color = "#eac67a";
};
document.getElementById('btn').onclick = js_style;

instead of
document.getElementsByTagName('button').onclick = js_style();
try this :
var buttons = document.getElementsByTagName('button');
for (var i=0;i<buttons.length;i++)
{
buttons[i].onclick = js_style;
}
when you use js_style(); javascript will call that function so you should just introduce your function name to .onclick

You were attaching onclick event to collection of JS nodes. I've refactored your code and added one more class to button element to attachclick event on that.
It is always advisable to add class with js prefix to attach event handler to DOM elements. In this way,no one will mess with js-* classes.
//create outer div and apply styles
var outerDiv = document.createElement('div');
var outerDivStyle = 'background-color:#d79365;padding: 40px;';
outerDiv.id = 'block';
outerDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(outerDiv);
outerDiv.style.cssText = outerDivStyle;
//create inner div and apply styles
var innerDiv = document.createElement('div');
innerDiv.className = 'block-3';
outerDiv.appendChild(innerDiv);
var innerDivStyle = 'padding: 40px;text-align:center;';
innerDiv.innerHTML = "Here is changing the text: ";
innerDiv.style.cssText = innerDivStyle;
//create last div and apply styles
var lastDiv = document.createElement('div');
lastDiv.className = 'block-2';
// The variable iDiv is still good... Just append to it.
outerDiv.appendChild(lastDiv);
lastDiv.innerHTML = "I'm the inner div";
var lastDivStyle = 'background-color:#eac67a;padding: 40px;';
lastDiv.style.cssText = lastDivStyle;
//create button
var clickButton = document.createElement('button');
clickButton.id = 'js-btn';
clickButton.className = 'block-4';
outerDiv.appendChild(clickButton);
var btnStyles = 'background-color:#233237;color: white;margin:auto;display:block;width: 80px; height:50px;';
lastDiv.style.cssText = lastDivStyle;
clickButton.innerHTML = "Style";
clickButton.style.cssText = btnStyles;
function jsStyle() {
alert("hi");
document.querySelector("innerDiv");
innerDiv.style.fontSize = 'large';
innerDiv.style.font = 'italic bold 20px arial,serif';
innerDiv.style.color = "#eac67a";
};
document.querySelector('#js-btn').onclick = jsStyle;

Picking out specific individual controls out in javascript

So what I am trying to do here is copy an html table out of clubMemebers. Paste that table into two new places, and on the second "new" table called tblBody; set its first rows visibility to hidden, change the text in the cells to '' (nothing) and make its height = 0px... basically.
The problem is probably quite an obvious one to most people... they both are linked to a single table so a change to one will make a change to them all...
How can I separate these tables to do what I need to do? I've tried to search but all I came up with is copying tables to clipboard or excel.
Here bellow is the html and the javascript I am using.
<div id="DivHeaderRow"></div>
<div class="gridDiv" id="gridDiv" onscroll="OnScrollDiv(this)"></div>
<div id="DivFooterRow"></div>
<table style="width: 100%;" class="MemberTbl" runat="server" id="clubMembers" >
<tr class="Header" style="position:fixed;"></tr>
</table>
and the javascript:
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
var tblHead = document.getElementById(gridId);
var tblBody = document.getElementById(gridId);
if (tblHead) {
var DivHR = document.getElementById('DivHeaderRow');
var DivMC = document.getElementById('gridDiv');
var DivFR = document.getElementById('DivFooterRow');
//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight + 'px';
DivHR.style.position = 'relative';
DivHR.style.top = '10px';
DivHR.style.zIndex = '10';
DivHR.style.verticalAlign = 'top';
DivHR.style.overflow = 'hidden';
//*** Set divMainContent Properties ****
DivMC.style.position = 'relative';
DivMC.style.zIndex = '1';
//*** Set divFooterRow Properties ****
DivFR.style.width = (parseInt(width) - 16) + 'px';
DivFR.style.position = 'relative';
DivFR.style.top = -headerHeight + 'px';
DivFR.style.verticalAlign = 'top';
DivFR.style.paddingtop = '2px';
DivFR.style.overflow = 'hidden';
if (isFooter) {
var tblfr = tbl.cloneNode(true);
tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
var tblBody = document.createElement('tbody');
tblfr.style.width = '100%';
tblfr.cellSpacing = "0";
//*****In the case of Footer Row *******
tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
tblfr.appendChild(tblBody);
DivFR.appendChild(tblfr);
}
//****Copy Header in divHeaderRow****
var tblBodyRow = tblBody.rows[0];
tblBodyRow.style.visibilty = 'hidden';
tblBodyRow.style.height = '0px';
for(var i = 0, tblBodyRow; tblBodyCell = tblBodyRow.cells[i]; i++)
{
tblBodyCell.innerHTML = '';
}
DivHR.appendChild(tblHead.cloneNode(true));
DivMC.appendChild(tblBody.cloneNode(true));
}
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow').scrollLeft = Scrollablediv.scrollLeft;
}
window.onload = function () {
MakeStaticHeader('clubMembers', 100, 400, 25, false)
}

Maybe your problem would be fixed changing your lines:
var tblHead = document.getElementById(gridId);
var tblBody = document.getElementById(gridId);
for:
var tblHead = document.getElementById(gridId).cloneNode(true);
var tblBody = document.getElementById(gridId).cloneNode(true);
However, maybe you could try with jquery to manipulate DOM elements... Then, with something like this could be enough (see Fiddle):
tableHtml = $('#clubMembers').html();
$('#DivHeaderRow').html(tableHtml);
$('#DivHeaderRow').find("tr").first().hide();
$('#gridDiv').html(tableHtml);

How to change an item's position trough style.position?

I want to move my text label in the custom position using document.style.position I have this script:
var clickHandler = function() {
var doc = document.getElementById("result");
doc.style.visibility = "visible";
doc.style.color = "#ff0000";
doc.style.position = "left:150px";
}
(seen this as position tutorial). Where's I'd mistaken?

What you want is:
doc.style.position = "absolute"; // or "relative" or "fixed" or etc
doc.style.left = "150px";
See: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Check this code:
var clickHandler = function() {
var doc = document.getElementById("result");
doc.style.visibility = "visible";
doc.style.color = "#ff0000";
doc.style.left= "150px";
}