Как динамически визуализировать HTML

Question

Недавно я столкнулся с вопросом, вот он, у меня есть две кнопки BTN1, BTN2. При щелчке BTN1 он должен исчезнуть, и должны появиться два новых BTN_A и BTN_B, по щелчку или BTN_A, он должен исчезнуть. & BTN1.A, BTN1.B должно появиться. Как достичь этого, если я все еще хочу нажать на BTN и заставить их исчезнуть.

Я думал, что мы можем сделать «отображение: нет», но на сколько, как визуализировать html динамически наилучшим образом?

Answer 1

Есть 4 возможности скрыть элемент DOM, например, кнопку. Первые три изменения стиля css:

• непрозрачность: 0;
• видимость: скрытая;
• дисплей: нет;
• удаления элемента из 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>