How to dynamically render HTML

Question

Recently I came across a question, here it goes, I have two buttons BTN1, BTN2. On click of BTN1 it should disappear and two new BTN_A and BTN_B has to appear, on click or BTN_A, it should disappear & BTN1.A, BTN1.B should appear. How to achieve this if I still want to click on BTN's and make them disappear.

I thought we can make "display: none" but for how many, how to render a html dynamically in the best way?

theres many libraries/frameworks that do this. – Daniel A. White Sep 25 '16 at 18:33 — Daniel A. White, Sep 25 '16 at 18:33
I think some JS could do the job – TheCrimulo Sep 25 '16 at 18:36 — TheCrimulo, Sep 25 '16 at 18:36
Learn JavaScript DOM manipulation and/or jQuery. – Nhan Sep 25 '16 at 18:36 — Nhan, Sep 25 '16 at 18:36

score 1 · Answer 1 · answered Sep 25 '16 at 19:41

There are 4 possibilities to hide a DOM element like a button. The first three are css style changes:

opacity: 0;
visibility: hidden;
display: none;
removing the element from the DOM with removeChild()

The needed code is the following:

document.getElementById('myBtn').style.opacity = '0';
document.getElementById('myBtn').style.display = "none";
document.getElementById('myBtn').style.visibility = "hidden";

The code for adding and removing elements goes like this:

var div = document.getElementById('endlessBtnContainer');
div.innerHTML = div.innerHTML + '<button id="addBtn" onclick="addBtn()">addBtn</button>';

and removing

var div = document.getElementById('addBtn');
div.parentNode.removeChild(div);

opacity: 0; will simply make the element not visible, but it is still existing normally. So you can still click the button.
visibility: hidden; Will hide the element, but it will still take up the same space it had when it was still visible. It won't be clickable anymore.
display: none; Will hide the element and it won't take any space anymore. Therefore following HTML elements will flow into the new available space.

#btnA, #btnB, #btn1A, #btn1B{
  opacity: 0;
}

<script> 
function hideElem()
{
 for (var i = 0; i < arguments.length; i++) {
   //document.getElementById(''+arguments[i]).style.opacity = '0';//just invisible, still clickable
   //document.getElementById(''+arguments[i]).style.display = "none";//no space taken
   document.getElementById(''+arguments[i]).style.visibility = "hidden";//invisible, not clickable
 } 
}

function showElem(targetElem)
{
 for (var i = 0; i < arguments.length; i++) {
  document.getElementById(''+arguments[i]).style.opacity = '1';
 } 
}

function addBtn()
{
 var div = document.getElementById('endlessBtnContainer');
 div.innerHTML = div.innerHTML + '<button id="addBtn" onclick="addBtn()">addBtn</button>';
}

function removeBtn()
{
 var div = document.getElementById('addBtn');
 div.parentNode.removeChild(div);
}
</script>

<button id="btn1" onclick="hideElem('btn1', 'btn2'); showElem('btnA', 'btnB');">
 btn1
</button>
<button id="btn2">
 btn2
</button>

<button id="btnA" onclick="hideElem('btnA', 'btnB'); showElem('btn1A', 'btn1B');">
 btnA
</button>
<button id="btnB"> 
 btnB
</button>

<button id="btn1A">
 btn1A
</button>
<button id="btn1B">
 btn1B
</button>

<button id="addBtn" onclick="addBtn()">
 addBtn
</button>
<button id="removeBtn" onclick="removeBtn()">
 removeBtn
</button>
<div id="endlessBtnContainer"> 
</div>

How to dynamically render HTML

1 Answers1