Question

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

我以为我们可以制作＆＃34; display：none＆＃34;但有多少，如何以最佳方式动态渲染html？

Answer 1

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

不透明度：0;
visibility：hidden;
display：none;
使用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元素将流入新元素可用空间。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何动态呈现HTML

1 个答案: