Q:

Dynamically alter contents of a div and append to another div

So basically I have this div in body

<body>
  <div id="main_content"></div>
</body>

Now I am downloading some data from the internet (a set of boolean data) and I have this div template. Let's say the data is (true, false, true). Then for each data I want to alter the template div. For example: first one is true so inside the template div I will change the sub1 div's height to 40 px; if it's false, I'd change sub2 div's height to 40 px; and then I'd append this modified template div to main_content div
Template div:

.child{
  width:300px;
  height:auto;
}

.sub1{
  width:300px;
  height:20px;
  background-color:#0FF;
}

.sub2{
  width:300px;
  height:20px;
  background-color:#F0F;
}
<div class="child">
  <div class="sub1"></div>
  <div class="sub2"></div>
</div>

After all this this should be the final output of main_content div

What would be the easiest way of doing this using HTML/CSS/JS.
Thanks

A:

Short answer: Here is a codepen
Long answer:
I would use js to dynamically generate your template div:
function makeTemplateDiv() {
  var child = document.createElement('div');
  child.className = "child"
  var sub1 = document.createElement('div');
  sub1.className = "sub1"
  var sub2 = document.createElement('div');
  sub2.className = "sub2"
  child.appendChild(sub1);
  child.appendChild(sub2);
  return child;
}

Then make a css class for a taller 40 px
.taller {
  height: 40px;
}

Then use js to to alter your template based on a passed in value
function alterTemplateDiv(value) {
  var template = makeTemplateDiv();
  if(value) {
    template.getElementsByClassName("sub1")[0].className += " taller";
  } else {
    template.getElementsByClassName("sub2")[0].className += " taller";
  }
  return template;
}

Then use js to pass in your array of values, make the divs, and append them
function appendDivs(arrayOfValues) {
  var mainDiv = document.getElementById("main_content");
  for(var i = 0; i < arrayOfValues.length; i++) {
    mainDiv.appendChild(alterTemplateDiv(arrayOfValues[i]));
  }
}

