如何动态呈现HTML

Question

最近我遇到了一个问题，在这里，我有两个按钮BTN1,BTN2。点击BTN1它应该消失，并且两个新的BTN_A和BTN_B必须出现，点击或BTN_A，它应该消失& BTN1.A，BTN1.B应该出现。如果我仍然想点击BTN并使它们消失，如何实现这一点。

我认为我们可以让“显示：无”，但有多少，如何动态地以最好的方式呈现html？

Answer 1

有4种可能性隐藏DOM元素，如按钮。 前三种是css风格变化：

• opacity：0;
• 知名度：隐藏;
• display：none;
• 从DOM与removeChild()

所需代码去除元件如下：

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

用于添加和删除元素的代码是这样的：

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

和删除

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

• opacity: 0;只会使元素不可见，但它仍然正常存在。所以你仍然可以点击按钮。
• visibility: hidden;将隐藏该元素，但它仍然需要 与它仍然可见时相同的空间。它不会是 可点击了。
• display: none;将隐藏的元素，它不会再采取任何空间 了。因此，以下HTML元素将流入新的可用空间。

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

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

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

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

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

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

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

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

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