如何動態呈現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>