如何动态呈现 HTML答案

【问题标题】：How to dynamically render HTML如何动态呈现 HTML
【发布时间】：2016-09-25 18:31:17
【问题描述】：

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

我认为我们可以制作“显示：无”，但是对于多少个，如何以最佳方式动态呈现html？

【问题讨论】：

有很多库/框架可以做到这一点。
我认为一些 JS 可以完成这项工作
学习 JavaScript DOM 操作和/或 jQuery。

标签： html javascript html dom

【解决方案1】：

隐藏 DOM 元素（如按钮）有 4 种可能性。前三个是css样式变化：

不透明度：0；
可见性：隐藏；
显示：无；
使用removeChild()从DOM中移除元素

需要的代码如下：

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()
{
	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>

【讨论】：