javascript - 如何动态渲染 HTML

Question

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

我认为我们可以制作“display: none”，但是有多少个，如何渲染 html以最佳方式动态地进行？

Answer 1

有 4 种可能性来隐藏 DOM 元素(例如按钮)。前三个是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>