javascript - 如何动态呈现HTML

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

我以为我们可以使“显示：无”，但有多少个，如何以最佳方式动态呈现html？

最佳答案

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

关于javascript - 如何动态呈现HTML，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39690346/